Menu
▾
▴
Home
<title id="user-content-title">Jack's Desk</title>
<link rel="shortcut icon" type="image/x-icon" href="Resources/Icon.jpg">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
.backgroundImg {
position: absolute;
width: 100%;
height: auto;
}
.mainDiv {
position: absolute;
width: 100%;
overflow:hidden;
}
.link {
cursor: pointer;
}
.linkLabel {
text-align: center;
position: absolute;
display: inline-block;
color: #FFFFFF
}
#phoneDiv {
transition: all .6s ease;
position: absolute;
left: 35%;
right: 35%;
width: auto;
overflow:hidden;
bottom: -100%;
}
#phoneImg {
position: absolute;
width: 100%;
height: auto;
}
#homeDiv {
position: absolute;
width: 100%;
height: 100%;
}
#closePhone {
position: absolute;
right: 0px;
top: 0px;
text-align: center;
border-radius: 15px;
width:24px;
height: 24px;
background-color: #000000;
border: 1px solid #FFFFFF;
color: white;
opacity: 0.4;
transition: opacity 0.5s;
}
#closePhone:hover {
opacity: 1;
}
#phoneScreenDiv {
position: absolute;
background-color: #FFFFFF;
top: 18%;
left: 4%;
right: 4%;
bottom: 0;
width: auto;
height: auto;
opacity: .88;
padding: 15px;
text-align: center;
overflow-y: auto;
overflow-x: hidden;
}
#maskDiv {
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: none;
}
.blurred {
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-ms-filter: blur(8px);
-o-filter: blur(8px);
filter: blur(8px);
}
.phoneIcons {
-webkit-transition: transform .5s;
-moz-transition: transform .5s;
-ms-transition: transform .5s;
-o-transition: transform .5s;
transition: transform .5s;
margin: auto;
display: block;
}
.phoneIcons:hover {
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
transform: scale(1.1, 1.1);
}
.phoneIconImg {
width: 40%;
height: auto;
}
.linkAnchor {
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.linkAnchor:hover {
-webkit-transform: scale(1.4, 1.4);
-moz-transform: scale(1.4, 1.4);
-ms-transform: scale(1.4, 1.4);
-o-transform: scale(1.4, 1.4);
transform: scale(1.4, 1.4);
opacity: 1.0;
}
#computerLabel {
font-size: 36px;
}
#corkBoardLabel {
font-size: 30px;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
#headphonesLabel {
font-size: 20px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
#phoneLabel {
font-size: 25px;
}
#cameraLabel {
font-size: 34px;
-webkit-transform: rotate(7deg);
-moz-transform: rotate(7deg);
-ms-transform: rotate(7deg);
-o-transform: rotate(7deg);
transform: rotate(7deg);
}
#drawerLabel {
font-size: 54px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
</style>
<label id="user-content-computerLabel" class="">Projects</label>
<label id="user-content-corkBoardLabel" class="">Drop me a note!</label>
<label id="user-content-headphonesLabel" class="" "="">♫My Songs♫</label>
<label id="user-content-phoneLabel" class="" onclick="phoneClick()">Contact me</label>
<label id="user-content-cameraLabel" class="">Photography</label>
<label id="user-content-drawerLabel" class="">Info</label>
<script style="">
const OPACITY = 0.6;
const ANIMATION_TIME = .9;
//For the fly in function.
var index = 0;
var sizes = [1280, 1920, 2560, 3840];
var i;
for (i = 0; i < sizes.length; i++) {
if (sizes[i] > window.innerWidth) break;
}
if (i >= sizes.length) i = sizes.length - 1;
document.getElementById("homeBackground").src = "Resources/Home " + sizes[i] + ".jpg";
document.getElementById("phoneImg").src = "Resources/Phone " + sizes[i] + ".png";
var background = document.getElementById("homeBackground");
/*var toFlyIn = document.getElementsByClassName("linkAnchor");
for (var j = 0; j < toFlyIn.length; j++) {
flyIn(toFlyIn[j]);
}*/
/*for (var i = 0; i < 60; i++) {
var theButton = document.createElement("a");
document.getElementById("mainDiv").appendChild(theButton);
theButton.innerText = "Hola number " + i;
theButton.style.cursor = "pointer";
theButton.style.position = "fixed";
theButton.href = "http://facebook.com";
theButton.style.left = Math.random() * window.innerWidth + "px";
theButton.style.top = Math.random() * window.innerHeight + "px";
flyIn(theButton, 0.06);
}*/
function load() {
resize();
var flyInEle = document.getElementsByClassName("linkAnchor");
for (var j = 0; j < flyInEle.length; j++){
flyIn(flyInEle[j]);
}
}
/*function mouseOver(event) {
var x = parseInt(event.offsetX * 100 / background.offsetWidth);
var y = parseInt(event.offsetY * 100 / background.offsetHeight);
document.getElementById("bruh").innerText = x + ", " + y;
}*/
function resize(){
var phoneDiv = document.getElementById("phoneDiv");
document.getElementById("mainDiv").style.height = background.offsetHeight + "px";
phoneDiv.style.height = document.getElementById("phoneImg").offsetHeight + "px";
centerObject(document.getElementById("computerLabel"), -1, -5);
centerObject(document.getElementById("corkBoardLabel"), -4, -25);
centerObject(document.getElementById("headphonesLabel"), -5, 10);
centerObject(document.getElementById("phoneLabel"), -3, -50);
centerObject(document.getElementById("cameraLabel"), 0, -56);
centerObject(document.getElementById("drawerLabel"), 0, -20);
}
function phoneClick() {
var phone = document.getElementById("phoneDiv");
document.getElementById("homeDiv").className += " blurred";
document.getElementById("maskDiv").style.display = "block";
phone.style.bottom = "0px";
}
function closePhoneClick() {
var phone = document.getElementById("phoneDiv");
document.getElementById("homeDiv").className = "";
document.getElementById("maskDiv").style.display = "none";
phone.style.bottom = "-100%";
}
function centerObject(element, offsetLeft, offsetTop) {
var container = element.parentNode;
element.style.left =
container.offsetWidth / 2 - element.offsetWidth / 2
+ offsetLeft * container.offsetWidth / 100 + "px";
element.style.top =
container.offsetHeight / 2 - element.offsetHeight / 2
+ offsetTop * container.offsetHeight / 100 + "px";
}
function flyIn(element) {
var cntner = document.getElementById("homeBackground");
var elementLeft = element.offsetLeft + element.offsetWidth / 2;
var elementTop = element.offsetTop + element.offsetHeight / 2;
var centerX = cntner.offsetWidth / 2;
var centerY = cntner.offsetHeight / 2;
var distanceX = centerX - elementLeft;
var distanceY = centerY - elementTop;
var distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
var angle = Math.atan2(centerY - elementTop, elementLeft - centerX);
var newLeft = (Math.cos(angle) * distance) / 2;
var newTop = - (Math.sin(angle) * distance) / 2;
var newStyle = document.createElement("Style");
newStyle.type = "text/css";
newStyle.innerHTML = ".flyin" + index
+ "{\nopacity: " + OPACITY + ";\nwidth:20%;"
+ "\n-webkit-animation: flyin" + index + " " + ANIMATION_TIME + "s reverse;"
+ "\n-moz-animation: flyin" + index + " " + ANIMATION_TIME + "s reverse;"
+ "\n-ms-animation: flyin" + index + " " + ANIMATION_TIME + "s reverse;"
+ "\n-o-animation: flyin" + index + " " + ANIMATION_TIME + "s reverse;"
+ "\nanimation: flyin" + index + " " + ANIMATION_TIME + "s reverse;\n}"
+ "\n@-webkit-keyframes flyin" + index + "{\n100%{\n-webkit-transform: translate(" + newLeft + "px, " + newTop + "px) scale(1.5, 1.5);\n opacity: 0}"
+ "\n0%{\n-webkit-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}\n}"
+ "\n@-moz-keyframes flyin" + index + "{\n100%{\n-moz-transform: translate(" + newLeft + "px, " + newTop + "px) scale(1.5, 1.5);\n opacity: 0}"
+ "\n0%{\n-moz-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}\n}"
+ "\n@-ms-keyframes flyin" + index + "{\n100%{\n-ms-transform: translate(" + newLeft + "px, " + newTop + "px) scale(1.5, 1.5);\n opacity: 0}"
+ "\n0%{\n-ms-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}\n}"
+ "\n@-o-keyframes flyin" + index + "{\n100%{\n-o-transform: translate(" + newLeft + "px, " + newTop + "px) scale(1.5, 1.5);\n opacity: 0}"
+ "\n0%{\n-o-transform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}\n}"
+ "\n@keyframes flyin" + index + "{\n100%{\ntransform: translate(" + newLeft + "px, " + newTop + "px) scale(1.5, 1.5);\n opacity: 0}"
+ "\n0%{\ntransform: translate(0px, 0px) scale(1, 1);\n opacity: " + OPACITY + "!important;}\n}"
;
document.getElementsByTagName("head")[0].appendChild(newStyle);
element.className += " flyin" + index;
index++;
}
</script>
<label id="user-content-computerLabel" class="">Projects</label>
<label id="user-content-corkBoardLabel" class="">Drop me a note!</label>
<label id="user-content-headphonesLabel" class="" "="">♫My Songs♫</label>
<label id="user-content-phoneLabel" class="" onclick="phoneClick()">Contact me</label>
<label id="user-content-cameraLabel" class="">Photography</label>
<label id="user-content-drawerLabel" class="">Info</label>
