l
/
p
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

:tada: init!

lily 3 months ago
commit
b9333170cb
29 changed files with 41207 additions and 0 deletions
Split View Show Diff Stats
  1. 2
    0
      .browserslistrc
  2. 5
    0
      .gitignore
  3. 4
    0
      .travis.yml
  4. 11693
    0
      package-lock.json
  5. 53
    0
      package.json
  6. 14
    0
      postcss.config.js
  7. 4805
    0
      src/fonts/GTAmerica-Regular.svg
  8. BIN
      src/fonts/GTAmerica-Regular.ttf
  9. BIN
      src/fonts/GTAmerica-Regular.woff
  10. BIN
      src/fonts/GTAmerica-Regular.woff2
  11. 4948
    0
      src/fonts/GTAmerica-RegularItalic.svg
  12. BIN
      src/fonts/GTAmerica-RegularItalic.ttf
  13. BIN
      src/fonts/GTAmerica-RegularItalic.woff
  14. BIN
      src/fonts/GTAmerica-RegularItalic.woff2
  15. 8360
    0
      src/fonts/Respira-Black.svg
  16. BIN
      src/fonts/Respira-Black.ttf
  17. BIN
      src/fonts/Respira-Black.woff
  18. BIN
      src/fonts/Respira-Black.woff2
  19. BIN
      src/images/cursor.png
  20. BIN
      src/images/favicon.ico
  21. 91
    0
      src/index.html
  22. 5
    0
      src/index.js
  23. 142
    0
      src/index.scss
  24. 10598
    0
      src/scripts/jquery.js
  25. 151
    0
      src/scripts/konami.js
  26. 169
    0
      src/scripts/script.js
  27. 117
    0
      webpack.common.js
  28. 7
    0
      webpack.dev.js
  29. 43
    0
      webpack.prod.js

+ 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 
+});

Write Preview
Loading…
Cancel
Save