Browse Source

inital commit

Kyle Perik 8 months ago
commit
43d2f910bf
4 changed files with 91 additions and 0 deletions
  1. 38 0
      colors.js
  2. 17 0
      index.html
  3. BIN
      me.jpg
  4. 36 0
      style.css

+ 38 - 0
colors.js

@@ -0,0 +1,38 @@
1
+window.onload = function () {
2
+    const body = document.body;
3
+
4
+    var state = {
5
+        colors: [
6
+            [255, 200, 200],
7
+            [200, 255, 200],
8
+            [200, 200, 255],
9
+        ],
10
+        i: 0,
11
+    };
12
+
13
+    function colorMix(a, b, per) {
14
+        return [...Array(3).keys()].map(
15
+    	    c => Math.sqrt(
16
+    	        Math.pow(a[c], 2)
17
+    		    + (
18
+    		        Math.pow(b[c], 2)
19
+    			    - Math.pow(a[c], 2)
20
+    		    ) * per
21
+    	    )
22
+        );
23
+    }
24
+
25
+    setInterval((last, pc) => {
26
+        var last = state;
27
+        var c = 'rgb(' + colorMix(
28
+            last.colors[Math.floor(last.i) % last.colors.length],
29
+            last.colors[Math.ceil(last.i) % last.colors.length],
30
+            last.i % 1
31
+        ).join(',') + ')';
32
+        body.style.backgroundColor = c;
33
+        state = {
34
+            ...last,
35
+            i: last.i + 0.01,
36
+        };
37
+    }, 100);
38
+}

+ 17 - 0
index.html

@@ -0,0 +1,17 @@
1
+<!DOCTYPE html>
2
+<html>
3
+<head>
4
+    <meta charset = "UTF-8">
5
+    <title>Kyle Perik - About Me</title>
6
+    <meta name="viewport" content="width=device-width, initial-scale=1">
7
+    <link type="text/css" rel="stylesheet" href="style.css" />
8
+    <script src="colors.js"></script>
9
+</head>
10
+<body>
11
+    <div class="content">
12
+        <img class="me" src="me.jpg"/>
13
+        <h1>About Me</h1>
14
+        <div>Hi, I'm Kyle Perik, and I do frontend development</div>
15
+    </div>
16
+</body>
17
+</html>

BIN
me.jpg


+ 36 - 0
style.css

@@ -0,0 +1,36 @@
1
+html {
2
+    height: 100%;
3
+}
4
+
5
+body {
6
+    display: flex;
7
+    align-items: center;
8
+    justify-content: center;
9
+    height: 100%;
10
+    background-color: #eee;
11
+    margin: 0;
12
+}
13
+
14
+.content {
15
+    background-color: white;
16
+    margin: 100px;
17
+    display: flex;
18
+    flex-direction: column;
19
+    justify-content: center;
20
+    align-items: center;
21
+    max-width: 500px;
22
+    flex-grow: 1;
23
+    padding: 0 50px;
24
+    padding-bottom: 50px;
25
+}
26
+
27
+.content img.me {
28
+    width: 150px;
29
+    border-radius: 1000px;
30
+    border: 6px solid white;
31
+    margin-top: -78px;
32
+}
33
+
34
+.content > * {
35
+    margin: 5px;
36
+}