contact me
+ +
+
+
+
+
+
+
+
+
+
+
+ Coder
⌄
+
+
+
+
+
+
\ No newline at end of file
diff --git a/mstile-150x150.png b/mstile-150x150.png
new file mode 100755
index 0000000..10ec060
Binary files /dev/null and b/mstile-150x150.png differ
diff --git a/safari-pinned-tab.svg b/safari-pinned-tab.svg
new file mode 100755
index 0000000..a5f1cca
--- /dev/null
+++ b/safari-pinned-tab.svg
@@ -0,0 +1,15 @@
+
+
+
diff --git a/site.webmanifest b/site.webmanifest
new file mode 100755
index 0000000..de65106
--- /dev/null
+++ b/site.webmanifest
@@ -0,0 +1,19 @@
+{
+ "name": "",
+ "short_name": "",
+ "icons": [
+ {
+ "src": "/android-chrome-192x192.png",
+ "sizes": "192x192",
+ "type": "image/png"
+ },
+ {
+ "src": "/android-chrome-256x256.png",
+ "sizes": "256x256",
+ "type": "image/png"
+ }
+ ],
+ "theme_color": "#ffffff",
+ "background_color": "#ffffff",
+ "display": "standalone"
+}
diff --git a/style.css b/style.css
new file mode 100755
index 0000000..f380b49
--- /dev/null
+++ b/style.css
@@ -0,0 +1,618 @@
+* {
+ box-sizing: border-box;
+
+}
+
+body{
+ display: flex;
+ flex:1;
+ font-family: 'Encode Sans', sans-serif;
+ margin: 0;
+ background: black;
+ color:black;
+ position: absolute;
+ max-width: 2000px;
+
+ }
+
+.app {
+
+ display: flex;
+ flex-direction: column;
+ flex:1;
+ perspective: 1px;
+ transform-style: preserve-3d;
+ height: 100vh;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+.parallax_container{
+
+
+}
+
+.hero {
+ display: flex;
+ flex: 1 0 auto;
+ height: 100vh;
+ color: white;
+ background: black;
+ position: relative;
+ z-index: -1;
+ transform: translateZ(-1px) scale(2);
+ padding-top: 15%;
+
+}
+
+.hero h2{
+ font-size: 30px;
+ padding: 0;
+ text-align: center;
+ margin-top: 0%;
+ margin-bottom: 0;
+
+}
+
+
+
+
+.hero__contents {
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+
+
+}
+ /*
+.coder:hover .hero__contents{
+
+ background-image: url("https://chrisphillers.000webhostapp.com/img/placeholder1.jpg");
+ background-size: 100vh;
+ background-repeat: no-repeat;
+ background-blend-mode: normal;
+ background-position-y: 15%;
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+
+}
+*/
+
+
+
+
+
+
+ .CP__logo{
+ display: flex;
+ justify-content: flex-end;
+ align-items: flex-end;
+ align-content: stretch;
+ padding: 0 0% 2% 0%;
+ }
+
+ .CP__logo h1{
+ color: white;
+ font-weight: 600;
+ font-size: 70px;
+ margin: 0;
+
+ }
+/*
+ a:active {
+ color: red;
+}
+ */
+
+ input {
+ display: none;
+}
+
+ input:checked + label {
+ color: green;
+}
+
+ a:visited {
+ text-decoration: none;
+ color: white;
+}
+
+a:link {
+ text-decoration: none;
+ color:white;
+}
+/*
+
+Attempt to get CP a link to animate elsewhere
+
+a h1:hover .hero__contents{
+ color: red;
+ background-image: url("https://chrisphillers.000webhostapp.com/img/placeholder1.jpg");
+}
+
+
+a h1:hover .slideout {
+ bottom: 150%;
+}
+
+
+
+.contact:hover .producer{
+ display: none;
+}
+
+
+#btn:hover ~ .slideout {
+ bottom: 150%;
+}
+
+
+
+:hover .slideout {
+ bottom: 150%;
+}
+
+.CP__Logo:hover {
+color:red;
+}
+
+#header{
+
+}
+
+
+#btn:hover > .body{
+ background: black;
+ }
+
+
+
+
+.hero:hover{
+ background-image: url("https://chrisphillers.000webhostapp.com/img/placeholder1.jpg");
+ background-size: 100vh;
+ background-repeat: no-repeat;
+ background-blend-mode: normal;
+ background-position-y: 15%;
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+
+
+ }
+*/
+
+ .logo:hover .slideout {
+ bottom: 150%;
+ }
+
+.dot {
+ margin: 0;
+ animation: fadein 2s infinite;
+}
+
+.contact{
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+ padding: 0% 2% 0 1%;
+ font-weight: 300;
+ font-size: 15px;
+ margin-top: -16%;
+ margin-left: 2%;
+ color: black;
+
+ }
+
+ .contact:hover .contact__text_slider{
+ left: 0px;
+
+ }
+ .contact__text_slider {
+ position: fixed;
+ margin-top:70px;
+ left: -315px;
+ width: 300px;
+ height: 300px;
+ background-color:transparent ;
+ transition:left 1s;
+ color:yellowgreen;
+ padding: 10px 10px 10px 40px;
+
+ text-decoration-color: yellowgreen;
+ text-transform: uppercase
+
+
+ }
+
+ a .contact__text_slider:hover {
+ text-decoration: underline;
+
+ }
+
+ a .contact__text_slider:visited {
+ color: white;
+ }
+
+
+.arrow{
+ font-size: 4vw;
+ margin-top: 0;
+
+}
+
+.rows{
+ display: block;
+ position: relative;
+ background-color: lightgrey;
+ z-index: 1;
+}
+
+ .rows h3{
+font-size: 1vw;
+
+ }
+
+ .skills{
+
+ width: 100%;
+ background: white;
+ padding-bottom: 20px;
+
+
+
+
+}
+
+.skills__title{
+ display: flex;
+ flex-direction: row;
+ color:black;
+
+}
+
+.skills img{
+
+ display: flex;
+ align-items: flex-start;
+ width:10vw;
+ margin: 0;
+
+}
+
+ul{
+ list-style-type: none;
+ }
+
+.skills__logos {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+ align-items: flex-start;
+ margin-right:10%;
+
+}
+
+
+.jobs {
+ height: 200vw;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ font-size: 4vw;
+ color:white;
+ background-image: linear-gradient(black, lightgrey);
+}
+
+
+.jobs img{
+ margin-top:50vw;
+ width:10vw;
+}
+
+ .row{
+ height: 15%;
+ align-items: center;
+ margin-bottom: 15%;
+ background-color:lightgrey;
+ }
+
+
+ .row__left__box{
+ display: flex;
+ flex-wrap: wrap;
+ font-weight: 300;
+ }
+
+ .row_right_box{
+ display: none;
+
+ }
+
+ .row__left__box h4{
+font-weight:300;
+
+ }
+
+
+ .row__header{
+ display: flex;
+ justify-content: center;
+ text-transform: uppercase;
+
+ }
+
+ .row__media img{
+ width:100%;
+ -webkit-box-shadow: 3px 2px 5px 3px grey; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
+ -moz-box-shadow: 3px 2px 5px 3px grey; /* Firefox 3.5 - 3.6 */
+ box-shadow: 3px 2px 5px 3px grey; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
+}
+
+
+
+ .row__job {
+ display: flex;
+ flex:1;
+ align-self: flex-start;
+ margin-left: 10%;
+
+ }
+
+ .row__more {
+ display: flex;
+ align-self: flex-end;
+ margin-right: 10%;
+ }
+
+
+ .row__description{
+ display: none;
+ }
+
+
+/*
+.companies{
+ width: 100%;
+ height: 300px;
+ background: blueviolet;
+ padding-bottom: 20px;
+
+ }
+
+.companies__title{
+
+ display: flex;
+ justify-content: flex-start;
+ align-items: flex-start;
+
+}
+
+.companies img{
+
+ width:13vw;
+ margin: 1vw;
+
+}
+
+
+.companies__logos {
+
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-around;
+
+}
+
+*/
+
+
+.about {
+ display: flex;
+ justify-content: flex-start;
+ background: white;
+ background-color: black;
+ color: white;
+ padding-left:7%;
+ padding-right:7%;
+ padding-bottom: 7%;
+
+}
+
+.about_image{
+ display: flex;
+ flex: 1;
+ justify-content: center;
+ align-items: center;
+
+
+}
+
+.about__image img{
+ width:0;
+
+}
+
+.about__info{
+display: flex;
+flex: 1;
+flex-direction: column;
+}
+
+.about__title{
+font-size: 30px;
+text-transform: uppercase;
+
+}
+
+.about__title h5{
+ margin-bottom: 0;
+ padding-top:20px;
+}
+
+.about__about{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+}
+
+.about__job{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+
+}
+
+
+
+.about__skills{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+
+}
+
+.about__links{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+
+}
+
+
+.about__image__mobile img{
+width:100%;
+display: flex;
+flex-direction: row;
+padding-top: 3%;
+
+
+}
+/* transition animation effect
+:hover .slideout {
+ bottom: 150%;
+
+ }
+ */
+.slideout {
+display:none;
+ position: fixed;
+ bottom: -300%;
+ width: 800px;
+ height: 150%;
+ background-color: white ;
+ transition:bottom 2.5s;
+ margin-right:300px;
+
+
+}
+@keyframes fadein {
+ 0% {
+ opacity: 0;
+ }
+ 50% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+}
+
+
+ @media (min-width: 768px) {
+
+
+ .about__image img{
+ width: 50vw;
+ padding-right:10%;
+ padding-top:10%;
+
+ }
+
+ .about__image__mobile img{
+ display: none;
+
+ }
+
+}
+
+ @media (min-width: 960px) {
+
+ .contact{
+ color: white;
+
+ }
+
+ .hero:hover{
+ background-image: url("https://chrisphillers.000webhostapp.com/img/placeholder1.gif");
+ background-size: 100vh;
+ background-repeat: no-repeat;
+ background-blend-mode: normal;
+ background-position-y:-0;
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ -webkit-transition: background-image 0.5s ease-in-out;
+ transition: background-image 0.5s ease-in-out;
+
+
+ }
+
+ .row_right_box{
+ display: flex;
+ flex:1;
+
+ }
+
+ .row__media img{
+ width:50%;
+ -webkit-box-shadow: 3px 2px 5px 3px grey; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
+ -moz-box-shadow: 3px 2px 5px 3px grey; /* Firefox 3.5 - 3.6 */
+ box-shadow: 3px 2px 5px 3px grey; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
+ }
+
+ .jobs {
+
+ font-size: 4vw;
+ }
+
+ .skills img {
+ width:5vw;
+
+
+ }
+ }
+
+ @media (min-width: 1200px) {
+
+
+
+
+
+ .hero h2{
+ font-size: 2vw;
+
+ }
+
+
+ .row__left__box{
+ padding-left:10vw;
+ }
+
+
+ .row{
+ height: 10%;
+
+ margin-bottom: 15%;
+
+ }
+
+
+ .jobs {
+
+ font-size: 2vw;
+ }
+
+
+ }S
+
+ 
+
+
+
+ Here are a few jobs I've done (probably)
+
+
+
+
+
+
+
+
+
+ Build of google.com
+ 
+
+
+
+
+
+ JOB TITLE: Javascript lead
more info
+
+
+ efwefew wef
+
+
+
+
+
+
+
+ Build of google.com
+ 
+
+
+
+
+
+ JOB TITLE: Javascript lead
more info
+
+
+ efwefew wef
+
+
+
+
+
+ Code Languages
-
+
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Who am I?
Job
I am currently learning JS at Constructors labs
Job
I am currently learning JS at Constructors labs
Job
I am currently learning JS at Constructors labs dw sedvsd asf asf asf as saf saf asf sdvsdv
Links
I am currently learning JS at Constructors labs