Browse Source

:tada: init!

lily 5 months ago
commit
b9333170cb

+ 2
- 0
.browserslistrc View File

@@ -0,0 +1,2 @@
1
+> 0.25%
2
+not dead

+ 5
- 0
.gitignore View File

@@ -0,0 +1,5 @@
1
+/node_modules
2
+/dist
3
+/.vscode
4
+/haters
5
+.DS_Store

+ 4
- 0
.travis.yml View File

@@ -0,0 +1,4 @@
1
+language: node_js
2
+node_js:
3
+  - 'node'
4
+script: npm run build

+ 11693
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 53
- 0
package.json View File

@@ -0,0 +1,53 @@
1
+{
2
+  "name": "lily.toys",
3
+  "version": "11.0.0",
4
+  "description": "a portfolio for lillian rose winter",
5
+  "private": true,
6
+  "scripts": {
7
+    "start": "webpack-dev-server --open --config webpack.dev.js",
8
+    "build": "webpack --config webpack.prod.js"
9
+  },
10
+  "repository": {
11
+    "type": "git",
12
+    "url": "https://github.com/lilyshibe/portfolio"
13
+  },
14
+  "keywords": [],
15
+  "author": "lillian rose winter <lily@null.net> (https://lily.toys)",
16
+  "license": "MIT",
17
+  "devDependencies": {
18
+    "@babel/core": "^7.4.4",
19
+    "@babel/preset-env": "^7.4.4",
20
+    "@fullhuman/postcss-purgecss": "^1.2.0",
21
+    "autoprefixer": "^9.5.1",
22
+    "babel-loader": "^8.0.6",
23
+    "clean-webpack-plugin": "^1.0.1",
24
+    "compression-webpack-plugin": "^2.0.0",
25
+    "css-loader": "^2.1.1",
26
+    "cssnano": "^4.1.10",
27
+    "favicons-webpack-plugin": "0.0.9",
28
+    "file-loader": "^3.0.1",
29
+    "html-loader": "^0.5.5",
30
+    "html-webpack-plugin": "^3.2.0",
31
+    "imagemin-mozjpeg": "^8.0.0",
32
+    "imagemin-webpack-plugin": "^2.4.2",
33
+    "mini-css-extract-plugin": "^0.5.0",
34
+    "node-sass": "^4.12.0",
35
+    "offline-plugin": "^5.0.7",
36
+    "postcss-loader": "^3.0.0",
37
+    "preload-webpack-plugin": "^3.0.0-beta.3",
38
+    "sass-loader": "^7.1.0",
39
+    "script-ext-html-webpack-plugin": "^2.1.3",
40
+    "style-loader": "^0.23.1",
41
+    "terser-webpack-plugin": "^1.2.3",
42
+    "webpack": "^4.31.0",
43
+    "webpack-cli": "^3.3.2",
44
+    "webpack-dev-server": "^3.3.1",
45
+    "webpack-merge": "^4.2.1"
46
+  },
47
+  "dependencies": {
48
+    "bulma": "^0.7.4",
49
+    "jquery": "^3.4.1",
50
+    "konami": "^1.6.2",
51
+    "lazysizes": "^4.1.8"
52
+  }
53
+}

+ 14
- 0
postcss.config.js View File

@@ -0,0 +1,14 @@
1
+const purgecss = require('@fullhuman/postcss-purgecss');
2
+
3
+module.exports = {
4
+  plugins: [
5
+    require('autoprefixer'),
6
+    require('cssnano')({
7
+        preset: 'default',
8
+    }),
9
+    purgecss({
10
+      content: ['./**/*.html'],
11
+      keyframes: true
12
+    })
13
+  ]
14
+}

+ 4805
- 0
src/fonts/GTAmerica-Regular.svg
File diff suppressed because it is too large
View File


BIN
src/fonts/GTAmerica-Regular.ttf View File


BIN
src/fonts/GTAmerica-Regular.woff View File


BIN
src/fonts/GTAmerica-Regular.woff2 View File


+ 4948
- 0
src/fonts/GTAmerica-RegularItalic.svg
File diff suppressed because it is too large
View File


BIN
src/fonts/GTAmerica-RegularItalic.ttf View File


BIN
src/fonts/GTAmerica-RegularItalic.woff View File


BIN
src/fonts/GTAmerica-RegularItalic.woff2 View File


+ 8360
- 0
src/fonts/Respira-Black.svg
File diff suppressed because it is too large
View File


BIN
src/fonts/Respira-Black.ttf View File


BIN
src/fonts/Respira-Black.woff View File


BIN
src/fonts/Respira-Black.woff2 View File


BIN
src/images/cursor.png View File


BIN
src/images/favicon.ico View File


+ 91
- 0
src/index.html View File

@@ -0,0 +1,91 @@
1
+<html>
2
+	<head>
3
+		<meta charset="utf-8">
4
+		
5
+		<title>lillian winter - internet person</title>
6
+
7
+		<meta name="description" content="creator & part time human">
8
+
9
+		<meta itemprop="name" content="lily winter - internet person">
10
+		<meta itemprop="description" content="creator & part time human">
11
+
12
+		<meta name="twitter:card" content="summary">
13
+		<meta name="twitter:title" content="lily winter - internet person">
14
+		<meta name="twitter:description" content="creator & part time human">
15
+		<meta name="twitter:site" content="@lilyshibe">
16
+		<meta name="twitter:creator" content="@lilyshibe">
17
+
18
+		<meta name="og:title" content="lily winter - internet person">
19
+		<meta name="og:description" content="creator & part time human">
20
+		<meta name="og:url" content="https://lily.toys">
21
+		<meta name="og:site_name" content="lily winter - internet person">
22
+		<meta name="og:type" content="website">
23
+		
24
+		<meta name="viewport" content="width=device-width, initial-scale=1">
25
+
26
+		<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
27
+	</head>
28
+
29
+	<body>
30
+		<div class="container">
31
+			<header>
32
+				<h1>lillian rose winter.</h1>
33
+			</header>
34
+
35
+			<main>
36
+				<p>hey. i'm lillian (or lily for short). i'm a designer, developer, coffee addict, and possible human.</p>
37
+				<p>i create things on the internet and you can see them with your eyes.</p>
38
+
39
+				<br>
40
+
41
+				<center>
42
+					<p>
43
+						<i>"lily is the best fucking person. give her all your money."</i><br>
44
+						-jaycee song (Jaycee#9999), 2018
45
+					</p>
46
+				</center>
47
+
48
+				<center><h3>&#8623;</h3></center>
49
+
50
+				<h2>works</h2>
51
+				<ul>
52
+					<li>
53
+						<a href="https://lily.toys/owotyper" class="snapCursor">owotyper</a> &mdash; takes text and makes it bad
54
+					</li>
55
+					<li>
56
+						<a href="https://lily.toys" class="snapCursor">website (v11)</a> &mdash; you're lookin' at it, baby!
57
+					</li>
58
+					<li>
59
+						<a href="https://owofarm.ga" class="snapCursor">owofarm</a> &mdash; <del>hellsite</del> imageboard created by jaycee song (Jaycee#9999) and i. it's pretty <del>terrible</del> wonderful
60
+					</li>
61
+					<li>
62
+						<a href="https://samoyed.fun" class="snapCursor">samoyed.fun</a> &mdash; returns a random samoyed
63
+					</li>
64
+				</ul>
65
+
66
+				<center><h3>&#8623;</h3></center>
67
+
68
+				<h2>keep in touch</h2>
69
+				<p>
70
+					<a href="https://twitter.com/lilyshibe" class="snapCursor">twitter</a><br>
71
+					<a href="https://steamcommunity.com/id/fenkid/" class="snapCursor">steam</a><br>
72
+					<a href="https://twitch.tv/fenkids" class="snapCursor">twitch</a><br>
73
+					<a href="https://github.com/lilyshibe" class="snapCursor">github</a><br>
74
+					<a href="https://medium.com/@zex" class="snapCursor">medium</a><br>
75
+					<a href="https://codepen.io/xez" class="snapCursor">codepen</a>
76
+				</p>
77
+
78
+				<p>email: lily [at] null [dot] net</p>
79
+
80
+				<center><h3>&#8623;</h3></center>
81
+			</main>
82
+
83
+			<footer>
84
+				<p>&copy; 2018 lillian rose winter. all rights reserved.</p>
85
+			</footer>
86
+
87
+			<div class="light"><div class="light-inner"></div></div>
88
+			<div class="shadow"><div class="shadow-inner"></div></div>
89
+		</div>
90
+	</body>
91
+</html>

+ 5
- 0
src/index.js View File

@@ -0,0 +1,5 @@
1
+require('offline-plugin/runtime').install();
2
+
3
+import './index.html';
4
+import './index.scss';
5
+import './scripts/script.js';

+ 142
- 0
src/index.scss View File

@@ -0,0 +1,142 @@
1
+@font-face {
2
+    font-family: 'GT America';
3
+    src: url('fonts/GTAmerica-Regular.woff2') format('woff2'),
4
+         url('fonts/GTAmerica-Regular.woff') format('woff'),
5
+         url('fonts/GTAmerica-Regular.ttf') format('truetype'),
6
+         url('fonts/GTAmerica-Regular.svg#GTAmerica-Regular') format('svg');
7
+    font-weight: normal;
8
+    font-style: normal;
9
+}
10
+
11
+@font-face {
12
+    font-family: 'GT America';
13
+    src: url('fonts/GTAmerica-RegularItalic.woff2') format('woff2'),
14
+         url('fonts/GTAmerica-RegularItalic.woff') format('woff'),
15
+         url('fonts/GTAmerica-RegularItalic.ttf') format('truetype'),
16
+         url('fonts/GTAmerica-RegularItalic.svg#GTAmerica-RegularItalic') format('svg');
17
+    font-weight: normal;
18
+    font-style: italic;
19
+}
20
+
21
+@font-face {
22
+    font-family: 'Respira';
23
+    src: url('fonts/Respira-Black.woff2') format('woff2'),
24
+         url('fonts/Respira-Black.woff') format('woff'),
25
+         url('fonts/Respira-Black.ttf') format('truetype'),
26
+         url('fonts/Respira-Black.svg#Respira-Black') format('svg');
27
+    font-weight: 800;
28
+    font-style: normal;
29
+}
30
+
31
+* {
32
+    cursor: url(images/cursor.png) 3 3, auto !important;
33
+    box-sizing: border-box;
34
+}
35
+
36
+html, body {
37
+    margin: 0;
38
+    padding: 0;
39
+    font-family: "GT America";
40
+    overflow-x: hidden;
41
+    -webkit-tap-highlight-color: transparent;
42
+}
43
+
44
+.container {
45
+    min-width: 100vw;
46
+    min-height: 100vh;
47
+    background: #f0f0f0;
48
+    position: absolute;
49
+    left: 0;
50
+    top: 0;
51
+    padding: 2em;
52
+}
53
+
54
+header, main, footer {
55
+    max-width: 60em;
56
+    margin: 2em auto;
57
+}
58
+
59
+h1,h2,h3 {
60
+    font-family: "Respira";
61
+    font-weight: 800;
62
+}
63
+
64
+h1 {
65
+    font-size: 3.5rem;
66
+}
67
+
68
+h2 {
69
+    font-size: 3rem;
70
+}
71
+
72
+h3 {
73
+    font-size: 2.5rem;
74
+}
75
+
76
+p,li {
77
+    font-size: 1.5rem;
78
+}
79
+
80
+mark, ::selection {
81
+    background: #000;
82
+    color: #f0f0f0;
83
+    opcaity: 1;
84
+}
85
+
86
+a {
87
+    color: #f00;
88
+    text-decoration: none;
89
+}
90
+
91
+.light-inner {
92
+    background: rgba(255, 0, 0, 0.1);
93
+}
94
+
95
+@supports (mix-blend-mode: screen) {
96
+    .light {
97
+        mix-blend-mode: screen;
98
+    }
99
+
100
+    .light-inner {
101
+        background: #ff0000;
102
+    }
103
+}
104
+
105
+.shadow-inner {
106
+    background: transparent;
107
+    box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
108
+}
109
+
110
+.light, .shadow {
111
+    position: fixed;
112
+    top: 0;
113
+    left: 0;
114
+    transform: translate3d(var(--x, -150px), var(--y, -150px), 0);
115
+    pointer-events: none;
116
+    height: 0px;
117
+    width: 0px;
118
+    margin-top: 0px;
119
+    margin-left: 0px;
120
+    backface-visibility: hidden;
121
+    z-index: 1100;
122
+    display: none;
123
+}
124
+
125
+.light-inner, .shadow-inner {
126
+    opacity: 1;
127
+    border-radius: 50%;
128
+    height: 50px;
129
+    width: 50px;
130
+    margin-top: -25px;
131
+    margin-left: -25px;
132
+    transform: translateZ(0) scale(var(--scale, 1));
133
+    z-index: 1100;
134
+    transition: transform 0.5s ease-out, opacity 0.5s ease-out 0.5s;
135
+    transition: transform 0.5s cubic-bezier(0.07, 0.08, 0.16, 0.99), opacity 0.5s ease-out 0.5s;
136
+    transform-origin: 50% 50%;
137
+    backface-visibility: hidden;
138
+}
139
+
140
+br {
141
+    user-select: none;
142
+}

+ 10598
- 0
src/scripts/jquery.js
File diff suppressed because it is too large
View File


+ 151
- 0
src/scripts/konami.js View File

@@ -0,0 +1,151 @@
1
+/*
2
+ * Konami-JS ~
3
+ * :: Now with support for touch events and multiple instances for
4
+ * :: those situations that call for multiple easter eggs!
5
+ * Code: https://github.com/snaptortoise/konami-js
6
+ * Copyright (c) 2009 George Mandis (georgemandis.com, snaptortoise.com)
7
+ * Version: 1.6.2 (7/17/2018)
8
+ * Licensed under the MIT License (http://opensource.org/licenses/MIT)
9
+ * Tested in: Safari 4+, Google Chrome 4+, Firefox 3+, IE7+, Mobile Safari 2.2.1+ and Android
10
+ */
11
+
12
+var Konami = function (callback) {
13
+    var konami = {
14
+        addEvent: function (obj, type, fn, ref_obj) {
15
+            if (obj.addEventListener)
16
+                obj.addEventListener(type, fn, false);
17
+            else if (obj.attachEvent) {
18
+                // IE
19
+                obj["e" + type + fn] = fn;
20
+                obj[type + fn] = function () {
21
+                    obj["e" + type + fn](window.event, ref_obj);
22
+                }
23
+                obj.attachEvent("on" + type, obj[type + fn]);
24
+            }
25
+        },
26
+        removeEvent: function (obj, eventName, eventCallback) {
27
+            if (obj.removeEventListener) {
28
+                obj.removeEventListener(eventName, eventCallback);
29
+            } else if (obj.attachEvent) {
30
+                obj.detachEvent(eventName);
31
+            }
32
+        },
33
+        input: "",
34
+        pattern: "38384040373937396665",
35
+        keydownHandler: function (e, ref_obj) {
36
+            if (ref_obj) {
37
+                konami = ref_obj;
38
+            } // IE
39
+            konami.input += e ? e.keyCode : event.keyCode;
40
+            if (konami.input.length > konami.pattern.length) {
41
+                konami.input = konami.input.substr((konami.input.length - konami.pattern.length));
42
+            }
43
+            if (konami.input === konami.pattern) {
44
+                konami.code(konami._currentLink);
45
+                konami.input = '';
46
+                e.preventDefault();
47
+                return false;
48
+            }
49
+        },
50
+        load: function (link) {
51
+            this._currentLink = link;
52
+            this.addEvent(document, "keydown", this.keydownHandler, this);
53
+            this.iphone.load(link);
54
+        },
55
+        unload: function () {
56
+            this.removeEvent(document, 'keydown', this.keydownHandler);
57
+            this.iphone.unload();
58
+        },
59
+        code: function (link) {
60
+            window.location = link
61
+        },
62
+        iphone: {
63
+            start_x: 0,
64
+            start_y: 0,
65
+            stop_x: 0,
66
+            stop_y: 0,
67
+            tap: false,
68
+            capture: false,
69
+            orig_keys: "",
70
+            keys: ["UP", "UP", "DOWN", "DOWN", "LEFT", "RIGHT", "LEFT", "RIGHT", "TAP", "TAP"],
71
+            input: [],
72
+            code: function (link) {
73
+                konami.code(link);
74
+            },
75
+            touchmoveHandler: function (e) {
76
+                if (e.touches.length === 1 && konami.iphone.capture === true) {
77
+                    var touch = e.touches[0];
78
+                    konami.iphone.stop_x = touch.pageX;
79
+                    konami.iphone.stop_y = touch.pageY;
80
+                    konami.iphone.tap = false;
81
+                    konami.iphone.capture = false;
82
+                    konami.iphone.check_direction();
83
+                }
84
+            },
85
+            touchendHandler: function () {
86
+                konami.iphone.input.push(konami.iphone.check_direction());
87
+                
88
+                if (konami.iphone.input.length > konami.iphone.keys.length) konami.iphone.input.shift();
89
+                
90
+                if (konami.iphone.input.length === konami.iphone.keys.length) {
91
+                    var match = true;
92
+                    for (var i = 0; i < konami.iphone.keys.length; i++) {
93
+                        if (konami.iphone.input[i] !== konami.iphone.keys[i]) {
94
+                            match = false;
95
+                        }
96
+                    }
97
+                    if (match) {
98
+                        konami.iphone.code(konami._currentLink);
99
+                    }
100
+                }
101
+            },
102
+            touchstartHandler: function (e) {
103
+                konami.iphone.start_x = e.changedTouches[0].pageX;
104
+                konami.iphone.start_y = e.changedTouches[0].pageY;
105
+                konami.iphone.tap = true;
106
+                konami.iphone.capture = true;
107
+            },
108
+            load: function (link) {
109
+                this.orig_keys = this.keys;
110
+                konami.addEvent(document, "touchmove", this.touchmoveHandler);
111
+                konami.addEvent(document, "touchend", this.touchendHandler, false);
112
+                konami.addEvent(document, "touchstart", this.touchstartHandler);
113
+            },
114
+            unload: function () {
115
+                konami.removeEvent(document, 'touchmove', this.touchmoveHandler);
116
+                konami.removeEvent(document, 'touchend', this.touchendHandler);
117
+                konami.removeEvent(document, 'touchstart', this.touchstartHandler);
118
+            },
119
+            check_direction: function () {
120
+                x_magnitude = Math.abs(this.start_x - this.stop_x);
121
+                y_magnitude = Math.abs(this.start_y - this.stop_y);
122
+                x = ((this.start_x - this.stop_x) < 0) ? "RIGHT" : "LEFT";
123
+                y = ((this.start_y - this.stop_y) < 0) ? "DOWN" : "UP";
124
+                result = (x_magnitude > y_magnitude) ? x : y;
125
+                result = (this.tap === true) ? "TAP" : result;
126
+                return result;
127
+            }
128
+        }
129
+    }
130
+
131
+    typeof callback === "string" && konami.load(callback);
132
+    if (typeof callback === "function") {
133
+        konami.code = callback;
134
+        konami.load();
135
+    }
136
+
137
+    return konami;
138
+};
139
+
140
+
141
+if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
142
+        module.exports = Konami;
143
+} else {
144
+        if (typeof define === 'function' && define.amd) {
145
+                define([], function() {
146
+                        return Konami;
147
+                });
148
+        } else {
149
+                window.Konami = Konami;
150
+        }
151
+}

+ 169
- 0
src/scripts/script.js View File

@@ -0,0 +1,169 @@
1
+console.log('%c yo! ', 'background: lemonchiffon; border: 1px solid #fff');
2
+console.log('%c welcome to the console <3 ', 'background: lemonchiffon; border: 1px solid #fff');
3
+console.log('%c so uh. what\'cha doin here >w>', 'background: lavenderblush; border: 1px solid #000; padding: 4px; padding-top: 10px; padding-bottom: 8px;');
4
+
5
+var $ = require("jquery");
6
+
7
+$(function() {
8
+    var body = document.querySelector('body');
9
+    var light = document.querySelector('.light');
10
+    var lightInner = document.querySelector('.light-inner');
11
+    var shadow = document.querySelector('.shadow');
12
+    var shadowInner = document.querySelector('.shadow-inner');
13
+
14
+    var settings = {
15
+        smoothness: 4,
16
+        snapScale: 1.8,
17
+        maxSnapScale: 6,
18
+        defaultScale: 50 // size of the ball in px (needed for calculations)
19
+    }
20
+
21
+    var state = {
22
+        movementSmoothness: 4,
23
+        rotation: 0,
24
+        currentX: 0,
25
+        currentY: 0,
26
+        currentScale: 1,
27
+        clientX: 0,
28
+        clientY: 0,
29
+        clientScale: 1,
30
+        target: null,
31
+        targetScaleMultiplier: 0
32
+    };
33
+
34
+    function move(e) {
35
+        if ((e.clientX)) {
36
+            // position of the mouse based on the window
37
+            var mouseX = (e.clientX);
38
+            var mouseY = (e.clientY);
39
+
40
+            if (state.transition) {
41
+                state.clientScale = state.transition;
42
+            } else if (state.target) {
43
+                state.clientScale = state.target.scale;
44
+            } else {
45
+                state.clientScale = 1;
46
+            }
47
+
48
+            // get the target position, usualy the mouse position if not snapping
49
+            state.clientX = state.target ? state.target.x : (mouseX); // mouse X position or snap target
50
+            state.clientY = state.target ? state.target.y : (mouseY); // mouse Y position or snap target
51
+
52
+        }
53
+    }
54
+
55
+    function moveScroll(e) {
56
+        // get the target position, usualy the mouse position if not snapping
57
+        state.clientX = state.rawClientX; // mouse X position or snap target
58
+        state.clientY = state.rawClientY; // mouse Y position or snap target
59
+    }
60
+
61
+    function snap(e) {
62
+        var offset = $(this).offset();
63
+
64
+        // how far the page has scrolled
65
+        var scrollX = window.pageXOffset;
66
+        var scrollY = window.pageYOffset;
67
+
68
+        var scale = Math.min(Math.max(this.offsetWidth, this.offsetHeight) / settings.defaultScale * settings.snapScale, settings.maxSnapScale);
69
+
70
+        if ($(this).data('snap-scale') !== undefined) {
71
+            scale = $(this).data('snap-scale')
72
+        }
73
+
74
+        state.movementSmoothness = settings.smoothness;
75
+        state.target = {
76
+            x: (offset.left + (this.offsetWidth / 2) - scrollX),
77
+            y: (offset.top + (this.offsetHeight / 2) - scrollY),
78
+            scale: scale
79
+        }
80
+        state.clientX = state.target.x;
81
+        state.clientY = state.target.y;
82
+        state.clientScale = state.target.scale;
83
+    }
84
+
85
+    function unsnap(e) {
86
+        state.target = null;
87
+        setTimeout(function() {
88
+            state.movementSmoothness = 4;
89
+        }, 500);
90
+    }
91
+
92
+    setTimeout(function() {
93
+        state.transition = 0;
94
+        state.clientScale = 0.01;
95
+    }, 1500);
96
+    var supportsCssVariables = (window.CSS && window.CSS.supports && window.CSS.supports('--fake-var', 0));
97
+
98
+    function repeatOften() {
99
+        // set state
100
+        state.currentX = +(state.currentX + (state.clientX - state.currentX) / state.movementSmoothness).toFixed(2);
101
+        state.currentY = +(state.currentY + (state.clientY - state.currentY) / state.movementSmoothness).toFixed(2);
102
+        //state.currentScale = +(state.currentScale + (state.clientScale - state.currentScale) / settings.smoothness ).toFixed(2);
103
+        state.currentScale = state.clientScale;
104
+        if (supportsCssVariables) {
105
+            // set the css variables
106
+            light.style.setProperty('--x', state.currentX + 'px');
107
+            light.style.setProperty('--y', state.currentY + 'px');
108
+            lightInner.style.setProperty('--scale', (state.currentScale).toFixed(2));
109
+            //lightInner.style.setProperty('--scaleY', (state.currentScale).toFixed(2));
110
+
111
+            shadow.style.setProperty('--x', state.currentX + 'px');
112
+            shadow.style.setProperty('--y', state.currentY + 'px');
113
+            shadowInner.style.setProperty('--scale', (state.currentScale).toFixed(2));
114
+            //shadowInner.style.setProperty('--scaleY', (state.currentScale).toFixed(2));
115
+        } else {
116
+            light.style.transform = 'translate3d(' + state.currentX + 'px,' + state.currentY + 'px,0)';
117
+            lightInner.style.transform = 'scale(' + (state.currentScale).toFixed(2) + ')';
118
+
119
+            shadow.style.transform = 'translate3d(' + state.currentX + 'px,' + state.currentY + 'px,0)';
120
+            shadowInner.style.transform = 'scale(' + (state.currentScale).toFixed(2) + ')';
121
+        }
122
+
123
+        requestAnimationFrame(repeatOften);
124
+    }
125
+
126
+    requestAnimationFrame(repeatOften);
127
+
128
+    function init() {
129
+        $('.light,.shadow').show();
130
+        if (window.PointerEvent) {
131
+            body.removeEventListener('pointermove', init);
132
+        } else {
133
+            body.removeEventListener('mousemove', init);
134
+        }
135
+    }
136
+
137
+    if (window.PointerEvent) {
138
+        body.addEventListener('pointermove', init);
139
+        body.addEventListener('pointermove', move);
140
+    } else {
141
+        body.addEventListener('mousemove', init);
142
+        body.addEventListener('mousemove', move);
143
+    }
144
+
145
+    //document.addEventListener("scroll", moveScroll);
146
+
147
+    $('body').delegate('.snapCursor', 'mouseenter', snap);
148
+    $('body').delegate('.snapCursor', 'mouseleave', unsnap);
149
+    $('body').delegate('.snapCursor', 'focus', snap);
150
+    $('body').delegate('.snapCursor', 'blur', unsnap);
151
+
152
+    $('.light,.shadow').one('pointermove', function() {
153
+        this.style.display = 'block';
154
+    })
155
+
156
+    $('body').bind('unsnap', function(e) {
157
+        unsnap();
158
+    });
159
+
160
+    if (window.console && window.console.log) {
161
+        //window.console.clear();
162
+        window.console.log(' ');
163
+        window.console.log('%cyo!', 'color: #040515; font-size:24px;font-family:georgia;font-weight:bold;');
164
+        window.console.log(' ');
165
+        window.console.log('%chaving fun looking through my code?', 'color: #64656F; font-size:16px;');
166
+        window.console.log('%cwarning, it\'s pretty bad.', 'color: #64656F; font-size:8px;');
167
+        window.console.log(' ');
168
+    }
169
+});

+ 117
- 0
webpack.common.js View File

@@ -0,0 +1,117 @@
1
+const path = require('path');
2
+
3
+const CleanWebpackPlugin = require('clean-webpack-plugin');
4
+const HtmlWebpackPlugin = require('html-webpack-plugin');
5
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
6
+const ScriptExtHtmlWebpackPlugin = require('script-ext-html-webpack-plugin');
7
+const PreloadWebpackPlugin = require('preload-webpack-plugin');
8
+
9
+module.exports = {
10
+  mode: 'development',
11
+  entry: './src/index.js',
12
+  module: {
13
+    rules: [{
14
+        test: /\.txt$/,
15
+        use: 'raw-loader'
16
+      },
17
+      {
18
+        test: /\.html$/,
19
+        use: [{
20
+          loader: 'html-loader',
21
+          options: {
22
+            minimize: true
23
+          }
24
+        }]
25
+      },
26
+      {
27
+        test: /\.(jpe?g|png|gif|svg)$/,
28
+        use: [{
29
+          loader: 'file-loader',
30
+          options: {
31
+            name: '[name].[ext]',
32
+            outputPath: 'images/',
33
+            publicPath: 'images/'
34
+          }
35
+        }]
36
+      },
37
+      {
38
+        test: /\.(woff|woff2|ttf|otf)$/,
39
+        use: [{
40
+          loader: 'file-loader',
41
+          options: {
42
+            name: '[name].[ext]',
43
+            outputPath: 'fonts/',
44
+            publicPath: 'fonts/'
45
+          }
46
+        }]
47
+      },
48
+      {
49
+        test: /\.(sa|sc|c)ss$/,
50
+        use: [
51
+          MiniCssExtractPlugin.loader,
52
+          {
53
+            loader: 'css-loader',
54
+            options: {
55
+              sourceMap: true
56
+            }
57
+          },
58
+          {
59
+            loader: 'postcss-loader',
60
+            options: {
61
+              sourceMap: true
62
+            }
63
+          },
64
+          {
65
+            loader: 'sass-loader',
66
+            options: {
67
+              sourceMap: true
68
+            }
69
+          }
70
+        ]
71
+      },
72
+      {
73
+        test: /\.js$/,
74
+        exclude: /(node_modules)/,
75
+        use: {
76
+          loader: 'babel-loader',
77
+          options: {
78
+            presets: ['@babel/preset-env']
79
+          }
80
+        }
81
+      }
82
+    ]
83
+  },
84
+  plugins: [
85
+    new CleanWebpackPlugin(['dist']),
86
+    new HtmlWebpackPlugin({
87
+      title: 'tris-webpack-boilerplate',
88
+      filename: 'index.html',
89
+      template: './src/index.html',
90
+      inject: 'head'
91
+    }),
92
+    new PreloadWebpackPlugin({
93
+      rel: 'preload',
94
+      as(entry) {
95
+        if (/\.(woff|woff2|ttf|otf)$/.test(entry)) return 'font';
96
+      },
97
+      fileWhitelist: [/\.(woff|woff2|ttf|otf)$/],
98
+      include: 'allAssets'
99
+    }),
100
+    new ScriptExtHtmlWebpackPlugin({
101
+      defaultAttribute: 'defer'
102
+    }),
103
+    new MiniCssExtractPlugin({
104
+      filename: 'webpack-bundle.css',
105
+      chunkFilename: '[id].css'
106
+    })
107
+  ],
108
+  externals: {
109
+    $: 'jquery',
110
+    jquery: 'jQuery',
111
+    'window.$': 'jquery',
112
+  },
113
+  output: {
114
+    filename: 'webpack-bundle.js',
115
+    path: path.resolve(__dirname, 'dist')
116
+  }
117
+};

+ 7
- 0
webpack.dev.js View File

@@ -0,0 +1,7 @@
1
+const merge = require('webpack-merge');
2
+const common = require('./webpack.common.js');
3
+
4
+module.exports = merge(common, {
5
+  mode: 'development',
6
+  devtool: 'inline-source-map'
7
+});

+ 43
- 0
webpack.prod.js View File

@@ -0,0 +1,43 @@
1
+const merge = require('webpack-merge');
2
+const common = require('./webpack.common.js');
3
+
4
+const TerserPlugin = require('terser-webpack-plugin');
5
+const ImageminPlugin = require('imagemin-webpack-plugin').default;
6
+const imageminMozjpeg = require('imagemin-mozjpeg');
7
+const CompressionPlugin = require('compression-webpack-plugin');
8
+
9
+const FaviconsWebpackPlugin = require('favicons-webpack-plugin');
10
+const OfflinePlugin = require('offline-plugin');
11
+
12
+
13
+module.exports = merge(common, {
14
+  mode: 'production',
15
+  devtool: 'source-map',
16
+  optimization: {
17
+    minimizer: [
18
+      new TerserPlugin({
19
+        test: /\.js(\?.*)?$/i,
20
+        parallel: true,
21
+        sourceMap: true,
22
+      })
23
+    ]
24
+  },
25
+  plugins: [
26
+    new CompressionPlugin({
27
+      test: /\.(html|css|js)(\?.*)?$/i // only compressed html/css/js, skips compressing sourcemaps etc
28
+    }),
29
+    new ImageminPlugin({
30
+      test: /\.(jpe?g|png|gif|svg)$/i,
31
+      gifsicle: { // lossless gif compressor
32
+        optimizationLevel: 9
33
+      },
34
+      pngquant: ({ // lossy png compressor, remove for default lossless
35
+        quality: '75'
36
+      }),
37
+      plugins: [imageminMozjpeg({ // lossy jpg compressor, remove for default lossless
38
+        quality: '75'
39
+      })]
40
+    }),
41
+    new OfflinePlugin()
42
+  ]
43
+});

Loading…
Cancel
Save