travis/heinstrom.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: travis:2bd1f6eaff454a34d3b80cdab535af427255f71a
Branches Tags
travis:master
...
compare: travis:03117344a50b5dc36af510103bc657b65db6b784
Branches Tags
travis:master

10 Commits
2bd1f6eaff ... 03117344a5

Author SHA1 Message Date
Travis Heinstrom
03117344a5 Update index.html 2023-12-12 20:13:13 -05:00
Travis Heinstrom
87efc8d355 Update index.html 2023-12-12 20:09:51 -05:00
Tim Holman
9aa449c61c More centering 2022-05-28 13:59:04 -04:00
Tim Holman
564580db40 fix page heights 2022-05-28 13:56:33 -04:00
Tim Holman
51afd353df Cleaned up links 2022-05-28 13:27:42 -04:00
Travis Heinstrom
3ea1bc2762 Update index.html 2022-05-10 01:14:58 -04:00
Travis Heinstrom
615342a55b Update index.html 2022-05-10 01:14:01 -04:00
Travis Heinstrom
6c1ea34570 Update index.html 2022-05-10 01:12:15 -04:00
Tim Holman
e86f1afb2f responsive 2021-12-08 19:25:03 -05:00
Tim Holman
d82aeb744b fuckin ds store 2021-12-07 19:13:10 -05:00
4 changed files with 292 additions and 150 deletions
Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

86
css/style.css
View File

@@ -2,9 +2,16 @@
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
height: 100%;
min-height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body { body {
background-color: #0e0e0e; background-color: #0e0e0e;
height: 100vh;
margin: 0; margin: 0;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -13,21 +20,28 @@ body {
.background { .background {
background-color: #0e0e0e; background-color: #0e0e0e;
background-image: repeating-linear-gradient(135deg, #000, #19191a 1%, transparent 1.5%, transparent 50% ); background-image: repeating-linear-gradient(
135deg,
#000,
#19191a 1%,
transparent 1.5%,
transparent 50%
);
background-size: 100px 100px; background-size: 100px 100px;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
animation: fade-in 2500ms ease-out forwards 1s; animation: fade-in 2750ms ease-out forwards;
opacity: 0; opacity: 0;
} }
.card { .card {
display: block; display: block;
position: relative; position: relative;
width: 420px; max-width: 420px;
width: 80%;
height: 260px; height: 260px;
color: #fff; color: #fff;
flex: none; flex: none;
@@ -41,11 +55,11 @@ body {
display: block; display: block;
position: relative; position: relative;
background: #111; background: #111;
border-radius: 2px; border-radius: 3px;
} }
.card__figure::before { .card__figure::before {
content: ''; content: "";
position: absolute; position: absolute;
width: calc(100% - 14px); width: calc(100% - 14px);
height: calc(100% - 14px); height: calc(100% - 14px);
@@ -65,6 +79,7 @@ body {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
border-radius: 3px;
} }
.card__deco--shine div { .card__deco--shine div {
@@ -73,7 +88,12 @@ body {
height: 200%; height: 200%;
top: -50%; top: -50%;
left: -50%; left: -50%;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.9) 0%, rgba(200, 200, 200, 0.05) 50%, transparent 100%); background-image: linear-gradient(
45deg,
rgba(0, 0, 0, 0.9) 0%,
rgba(200, 200, 200, 0.05) 50%,
transparent 100%
);
} }
figcaption { figcaption {
@@ -93,11 +113,33 @@ h1 {
font-weight: 900; font-weight: 900;
} }
p { .links {
margin: 0; display: flex;
justify-content: space-between;
font-weight: 900; font-weight: 900;
align-items: center;
} }
a {
color: #ddd;
transition: color 100ms ease;
height: 20px;
}
a:hover {
color: #eee;
}
p {
margin: 0;
}
svg {
width: 20px;
height: 20px;
border-radius: 3px;
fill: currentColor;
}
@keyframes fade-in { @keyframes fade-in {
0% { 0% {
@@ -108,3 +150,29 @@ p {
} }
} }
@media screen and (max-width: 430px) {
.card {
height: 450px;
}
}
@media screen and (max-width: 380px) {
h1 {
font-size: 2.8rem;
line-height: 2.8rem;
}
}
@media screen and (max-width: 330px) {
h1 {
font-size: 2rem;
line-height: 2rem;
}
}
@media screen and (max-width: 250px) {
h1 {
font-size: 1.3rem;
line-height: 1.3rem;
}
}

50
index.html
View File

@@ -2,40 +2,58 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Travis Heinström</title> <title>Travis Heinström</title>
<meta name="description" content="" /> <meta name="description" content="The website of Travis Heinström" />
<!-- Needs Favicon -->
<link rel="stylesheet" type="text/css" href="./css/style.css" /> <link rel="stylesheet" type="text/css" href="./css/style.css" />
</head> </head>
<body> <body>
<div class="background"></div> <div class="background"></div>
<main>
<section class="content">
<div class="card"> <div class="card">
<figure class="card__figure"> <figure class="card__figure">
<div class="card__deco card__deco--shine"><div></div></div> <div class="card__deco card__deco--shine"><div></div></div>
<figcaption> <figcaption>
<h1>Travis <br/> Heinström</h1> <h1>
<p>Things Here<br/>Things Here - Things here</p> Travis <br />
Heinström
</h1>
<div class="links">
<span>travis@heinstrom.com</span>
<a href="https://www.linkedin.com/in/heinstrom" target="_blank" title="Travis on LinkedIn">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
x="0px"
y="0px"
viewBox="0 0 455 455"
xml:space="preserve"
>
<path
style="fill-rule: evenodd; clip-rule: evenodd"
d="M246.4,204.35v-0.665c-0.136,0.223-0.324,0.446-0.442,0.665H246.4z"
></path>
<path
style="fill-rule: evenodd; clip-rule: evenodd"
d="M0,0v455h455V0H0z M141.522,378.002H74.016V174.906h67.506V378.002z M107.769,147.186h-0.446C84.678,147.186,70,131.585,70,112.085c0-19.928,15.107-35.087,38.211-35.087 c23.109,0,37.31,15.159,37.752,35.087C145.963,131.585,131.32,147.186,107.769,147.186z M385,378.002h-67.524V269.345 c0-27.291-9.756-45.92-34.195-45.92c-18.664,0-29.755,12.543-34.641,24.693c-1.776,4.34-2.24,10.373-2.24,16.459v113.426h-67.537 c0,0,0.905-184.043,0-203.096H246.4v28.779c8.973-13.807,24.986-33.547,60.856-33.547c44.437,0,77.744,29.02,77.744,91.398V378.002 z"
></path>
</svg>
</a>
</div>
</figcaption> </figcaption>
</figure> </figure>
</div> </div>
</section>
</main>
<script src="./js/anime.min.js"></script> <script src="./js/anime.min.js"></script>
<script src="./js/main.js"></script> <script src="./js/main.js"></script>
<script> <script>
(function() { (function () {
new TiltFx(document.querySelector('.card', {})) new TiltFx(document.querySelector(".card", {}));
})() })();
</script> </script>
<script defer data-domain="heinstrom.com" src="https://plausible.nyc.h.rip/js/script.js"></script>
</body> </body>
</html> </html>

202
js/main.js
View File

@@ -1,12 +1,10 @@
(function (window) {
;(function(window) { "use strict";
'use strict';
// Helper vars and functions. // Helper vars and functions.
function extend( a, b ) { function extend(a, b) {
for( var key in b ) { for (var key in b) {
if( b.hasOwnProperty( key ) ) { if (b.hasOwnProperty(key)) {
a[key] = b[key]; a[key] = b[key];
} }
} }
@@ -14,17 +12,23 @@
} }
function getMousePos(e) { function getMousePos(e) {
var posx = 0, posy = 0; var posx = 0,
posy = 0;
if (!e) var e = window.event; if (!e) var e = window.event;
if (e.pageX || e.pageY) { if (e.pageX || e.pageY) {
posx = e.pageX; posx = e.pageX;
posy = e.pageY; posy = e.pageY;
} else if (e.clientX || e.clientY) {
posx =
e.clientX +
document.body.scrollLeft +
document.documentElement.scrollLeft;
posy =
e.clientY +
document.body.scrollTop +
document.documentElement.scrollTop;
} }
else if (e.clientX || e.clientY) { return { x: posx, y: posy };
posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
return { x : posx, y : posy }
} }
/** /**
@@ -40,61 +44,76 @@
TiltFx.prototype.options = { TiltFx.prototype.options = {
movement: { movement: {
imgWrapper : { wrapper: {
translation : {x: 0, y: 0, z: 0}, translation: { x: 0, y: 0, z: 0 },
rotation : {x: -5, y: 5, z: 0}, rotation: { x: -5, y: 5, z: 0 },
reverseAnimation : { reverseAnimation: {
duration : 1200, duration: 1200,
easing : 'easeOutElastic', easing: "easeOutElastic",
elasticity : 600 elasticity: 600,
} },
},
shine: {
translation: { x: 50, y: 50, z: 0 },
reverseAnimation: {
duration: 1200,
easing: "easeOutElastic",
elasticity: 600,
},
},
}, },
shine : {
translation : {x: 50, y: 50, z: 0},
reverseAnimation : {
duration : 1200,
easing : 'easeOutElastic',
elasticity: 600
}
}
}
}; };
/** /**
* Init. * Init.
*/ */
TiltFx.prototype._init = function() { TiltFx.prototype._init = function () {
this.DOM.animatable = {}; this.DOM.animatable = {};
this.DOM.animatable.imgWrapper = this.DOM.el.querySelector('.card__figure'); this.DOM.animatable.wrapper = this.DOM.el.querySelector(".card__figure");
this.DOM.animatable.shine = this.DOM.el.querySelector('.card__deco--shine > div'); this.DOM.animatable.shine = this.DOM.el.querySelector(
".card__deco--shine > div"
);
this._initEvents(); this._initEvents();
}; };
/** /**
* Init/Bind events. * Init/Bind events.
*/ */
TiltFx.prototype._initEvents = function() { TiltFx.prototype._initEvents = function () {
var self = this; var self = this;
this.mouseenterFn = function() { this.mouseenterFn = function () {
for(var key in self.DOM.animatable) { for (var key in self.DOM.animatable) {
anime.remove(self.DOM.animatable[key]); anime.remove(self.DOM.animatable[key]);
} }
}; };
this.mousemoveFn = function(ev) { this.mousemoveFn = function (ev) {
requestAnimationFrame(function() { self._layout(ev); }); requestAnimationFrame(function () {
self._layout(ev);
});
}; };
this.mouseleaveFn = function(ev) { this.mouseleaveFn = function (ev) {
requestAnimationFrame(function() { requestAnimationFrame(function () {
for(var key in self.DOM.animatable) { for (var key in self.DOM.animatable) {
if( self.options.movement[key] == undefined ) {continue;} if (self.options.movement[key] == undefined) {
continue;
}
anime({ anime({
targets: self.DOM.animatable[key], targets: self.DOM.animatable[key],
duration: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.duration || 0 : 1, duration:
easing: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.easing || 'linear' : 'linear', self.options.movement[key].reverseAnimation != undefined
elasticity: self.options.movement[key].reverseAnimation != undefined ? self.options.movement[key].reverseAnimation.elasticity || null : null, ? self.options.movement[key].reverseAnimation.duration || 0
: 1,
easing:
self.options.movement[key].reverseAnimation != undefined
? self.options.movement[key].reverseAnimation.easing || "linear"
: "linear",
elasticity:
self.options.movement[key].reverseAnimation != undefined
? self.options.movement[key].reverseAnimation.elasticity || null
: null,
scaleX: 1, scaleX: 1,
scaleY: 1, scaleY: 1,
scaleZ: 1, scaleZ: 1,
@@ -103,40 +122,63 @@
translateZ: 0, translateZ: 0,
rotateX: 0, rotateX: 0,
rotateY: 0, rotateY: 0,
rotateZ: 0 rotateZ: 0,
}); });
} }
}); });
}; };
this.DOM.el.addEventListener('mousemove', this.mousemoveFn); this.debounceLeaveFn = function (e) {
this.DOM.el.addEventListener('mouseleave', this.mouseleaveFn); e.stopPropagation();
this.DOM.el.addEventListener('mouseenter', this.mouseenterFn); clearTimeout(self.timeout);
self.timeout = setTimeout(() => {
self.mouseleaveFn();
}, 25);
}; };
TiltFx.prototype._layout = function(ev) { this.DOM.el.addEventListener("mousemove", this.mousemoveFn);
this.DOM.el.addEventListener("mouseleave", this.mouseleaveFn);
this.DOM.el.addEventListener("mouseenter", this.mouseenterFn);
this.DOM.el.addEventListener("touchend", this.debounceLeaveFn);
};
TiltFx.prototype._layout = function (ev) {
// Mouse position relative to the document. // Mouse position relative to the document.
var mousepos = getMousePos(ev), var mousepos = getMousePos(ev),
// Document scrolls. // Document scrolls.
docScrolls = {left : document.body.scrollLeft + document.documentElement.scrollLeft, top : document.body.scrollTop + document.documentElement.scrollTop}, docScrolls = {
left: document.body.scrollLeft + document.documentElement.scrollLeft,
top: document.body.scrollTop + document.documentElement.scrollTop,
},
bounds = this.DOM.el.getBoundingClientRect(), bounds = this.DOM.el.getBoundingClientRect(),
// Mouse position relative to the main element (this.DOM.el). // Mouse position relative to the main element (this.DOM.el).
relmousepos = { x : mousepos.x - bounds.left - docScrolls.left, y : mousepos.y - bounds.top - docScrolls.top }; relmousepos = {
x: mousepos.x - bounds.left - docScrolls.left,
y: mousepos.y - bounds.top - docScrolls.top,
};
// Movement settings for the animatable elements. // Movement settings for the animatable elements.
for(var key in this.DOM.animatable) { for (var key in this.DOM.animatable) {
if( this.DOM.animatable[key] == undefined || this.options.movement[key] == undefined ) { if (
this.DOM.animatable[key] == undefined ||
this.options.movement[key] == undefined
) {
continue; continue;
} }
var t = this.options.movement[key] != undefined ? this.options.movement[key].translation || {x:0,y:0,z:0} : {x:0,y:0,z:0}, var t =
r = this.options.movement[key] != undefined ? this.options.movement[key].rotation || {x:0,y:0,z:0} : {x:0,y:0,z:0}, this.options.movement[key] != undefined
? this.options.movement[key].translation || { x: 0, y: 0, z: 0 }
: { x: 0, y: 0, z: 0 },
r =
this.options.movement[key] != undefined
? this.options.movement[key].rotation || { x: 0, y: 0, z: 0 }
: { x: 0, y: 0, z: 0 },
setRange = function (obj) { setRange = function (obj) {
for(var k in obj) { for (var k in obj) {
if( obj[k] == undefined ) { if (obj[k] == undefined) {
obj[k] = [0,0]; obj[k] = [0, 0];
} } else if (typeof obj[k] === "number") {
else if( typeof obj[k] === 'number' ) { obj[k] = [-1 * obj[k], obj[k]];
obj[k] = [-1*obj[k],obj[k]];
} }
} }
}; };
@@ -145,22 +187,36 @@
setRange(r); setRange(r);
var transforms = { var transforms = {
translation : { translation: {
x: (t.x[1]-t.x[0])/bounds.width*relmousepos.x + t.x[0], x: ((t.x[1] - t.x[0]) / bounds.width) * relmousepos.x + t.x[0],
y: (t.y[1]-t.y[0])/bounds.height*relmousepos.y + t.y[0], y: ((t.y[1] - t.y[0]) / bounds.height) * relmousepos.y + t.y[0],
z: (t.z[1]-t.z[0])/bounds.height*relmousepos.y + t.z[0], z: ((t.z[1] - t.z[0]) / bounds.height) * relmousepos.y + t.z[0],
},
rotation: {
x: ((r.x[1] - r.x[0]) / bounds.height) * relmousepos.y + r.x[0],
y: ((r.y[1] - r.y[0]) / bounds.width) * relmousepos.x + r.y[0],
z: ((r.z[1] - r.z[0]) / bounds.width) * relmousepos.x + r.z[0],
}, },
rotation : {
x: (r.x[1]-r.x[0])/bounds.height*relmousepos.y + r.x[0],
y: (r.y[1]-r.y[0])/bounds.width*relmousepos.x + r.y[0],
z: (r.z[1]-r.z[0])/bounds.width*relmousepos.x + r.z[0]
}
}; };
this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[key].style.transform = 'translateX(' + transforms.translation.x + 'px) translateY(' + transforms.translation.y + 'px) translateZ(' + transforms.translation.z + 'px) rotateX(' + transforms.rotation.x + 'deg) rotateY(' + transforms.rotation.y + 'deg) rotateZ(' + transforms.rotation.z + 'deg)'; this.DOM.animatable[key].style.WebkitTransform = this.DOM.animatable[
key
].style.transform =
"translateX(" +
transforms.translation.x +
"px) translateY(" +
transforms.translation.y +
"px) translateZ(" +
transforms.translation.z +
"px) rotateX(" +
transforms.rotation.x +
"deg) rotateY(" +
transforms.rotation.y +
"deg) rotateZ(" +
transforms.rotation.z +
"deg)";
} }
}; };
window.TiltFx = TiltFx; window.TiltFx = TiltFx;
})(window); })(window);