Home modified by Jack Le

Jack Le — Mon, 31 Aug 2015 19:38:56 -0000
--- v1
+++ v2
@@ -1,8 +1,341 @@
-Welcome to your wiki!
+
+<html>

-This is the default page, edit it as you see fit. To add a new page simply reference it within brackets, e.g.: [SamplePage].
+<head data-gwd-animation-mode="quickMode">
+   Jack's Desk
+   <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>
+</head>

-The wiki uses [Markdown](/p/jack-s-des/wiki/markdown_syntax/) syntax.
+<body onresize="resize()" onload="load()">
+   
+       
+           
+           
+               Projects
+           
+           
+               Drop me a note!
+           
+           
+               ♫My Songs♫
+           
+           
+               Contact me
+           
+           
+               Photography
+           
+           
+               Info
+           
+       
+       
+       
+           
+           
+               ✖
+           
+           
+               
+                   
+               
+               


+               
+                   
+               
+               


+               
+                   
+               
+           
+       
+   
+   
+   <script style="">
+       const OPACITY = 0.6;
+       const ANIMATION_TIME = .9;
+       //For the fly in function.
+       var index = 0;

-[[members limit=20]]
-[[download_button]]
+       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>
+</body>
+
+</html>
Home modified by Jack Le

Jack Le — Mon, 31 Aug 2015 19:06:13 -0000
Welcome to your wiki!
This is the default page, edit it as you see fit. To add a new page simply reference it within brackets, e.g.: [SamplePage].
The wiki uses Markdown syntax.
Project Members:

Jack Le (admin)
Recent changes to Home

Home modified by Jack Le

Home modified by Jack Le

Project Members:
