rework portfolio
This commit is contained in:
parent
0adfc08c1a
commit
c86bc19515
9 changed files with 427 additions and 16 deletions
|
@ -10,14 +10,14 @@ body {
|
||||||
font-family: 'Poppins', sans-serif;
|
font-family: 'Poppins', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:not(#yugen) {
|
a {
|
||||||
color: white;
|
color: white;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border: transparent;
|
border: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a#yugen {
|
||||||
color: white;
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
border-bottom: 1vh solid #dadada;
|
border-bottom: 1vh solid #dadada;
|
||||||
border-right: 1vh solid #dadada;
|
border-right: 1vh solid #dadada;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"version": 3,
|
"version": 3,
|
||||||
"mappings": "AAAA,OAAO,CAAC,mEAAI;AAEZ,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CAAG;;AAGjB,AAAA,IAAI,CAAC;EACD,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,qBAAqB;CAAG;;AAEzC,AAAA,CAAC,AAAA,IAAK,CAAA,MAAM,EAAE;EACV,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,WAAW;CAAG;;AAE1B,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,iBAAiB;EAChC,YAAY,EAAE,iBAAiB;EAC/B,WAAW,EAAE,iBAAiB;EAC9B,UAAU,EAAE,iBAAiB;CAAG;;AACpC,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,KAAK;EACb,YAAY,EAAE,IAAI;CAAG;;AAEzB,AAAA,EAAE,CAAC;EACC,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CAAG;;AAE9B,AAAA,KAAK,CAAC;EACF,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAEzB,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,QAAQ,CAAC;EACL,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,KAAK,CAAC;EACF,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,UAAU,CAAC;EACP,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,GAAG;CAGQ;;AANxB,AAII,MAJE,CAIF,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;CAAG;;AAEtB,AAAA,QAAQ,CAAC;EACL,OAAO,EAAE,MAAM;CAAG;;AAEtB,AAAA,MAAM,CAAC;EACC,SAAS,EAAE,GAAG;EACd,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,GAAG;EACZ,UAAU,EAAE,KAAK;CAAG",
|
"mappings": "AAAA,OAAO,CAAC,mEAAI;AAEZ,AAAA,CAAC,CAAC;EACE,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;CAAG;;AAGjB,AAAA,IAAI,CAAC;EACD,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,WAAW,EAAE,qBAAqB;CAAG;;AAEzC,AAAA,CAAC,CAAC;EACE,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,MAAM,EAAE,WAAW;CAAG;;AAE1B,AAAA,CAAC,AAAA,MAAM,CAAC;EACJ,KAAK,EAAE,KAAK;EACZ,eAAe,EAAE,IAAI;EACrB,aAAa,EAAE,iBAAiB;EAChC,YAAY,EAAE,iBAAiB;EAC/B,WAAW,EAAE,iBAAiB;EAC9B,UAAU,EAAE,iBAAiB;CAAG;;AACpC,AAAA,OAAO,CAAC;EACJ,MAAM,EAAE,KAAK;EACb,YAAY,EAAE,IAAI;CAAG;;AAEzB,AAAA,EAAE,CAAC;EACC,SAAS,EAAE,GAAG;EACd,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,IAAI;EACb,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,MAAM;CAAG;;AAE9B,AAAA,KAAK,CAAC;EACF,gBAAgB,EAAE,KAAK;EACvB,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;CAAG;;AAEzB,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,QAAQ,CAAC;EACL,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,SAAS,CAAC;EACN,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,KAAK,CAAC;EACF,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,UAAU,CAAC;EACP,UAAU,EAAE,OAAO;CAAG;;AAE1B,AAAA,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;EACX,OAAO,EAAE,GAAG;CAGQ;;AANxB,AAII,MAJE,CAIF,MAAM,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,IAAI;CAAG;;AAEtB,AAAA,QAAQ,CAAC;EACL,OAAO,EAAE,MAAM;CAAG;;AAEtB,AAAA,MAAM,CAAC;EACC,SAAS,EAAE,GAAG;EACd,YAAY,EAAE,IAAI;EAClB,OAAO,EAAE,GAAG;EACZ,UAAU,EAAE,KAAK;CAAG",
|
||||||
"sources": [
|
"sources": [
|
||||||
"x.sass"
|
"x.sass"
|
||||||
],
|
],
|
||||||
|
|
|
@ -10,13 +10,13 @@ body
|
||||||
color: white
|
color: white
|
||||||
font-family: 'Poppins', sans-serif
|
font-family: 'Poppins', sans-serif
|
||||||
|
|
||||||
a:not(#yugen)
|
a
|
||||||
color: white
|
color: white
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
border: transparent
|
border: transparent
|
||||||
|
|
||||||
a
|
a#yugen
|
||||||
color: white
|
color: black
|
||||||
text-decoration: none
|
text-decoration: none
|
||||||
border-bottom: 1vh solid #dadada
|
border-bottom: 1vh solid #dadada
|
||||||
border-right: 1vh solid #dadada
|
border-right: 1vh solid #dadada
|
||||||
|
@ -73,3 +73,4 @@ button
|
||||||
border-style: none
|
border-style: none
|
||||||
padding: 1vh
|
padding: 1vh
|
||||||
background: white
|
background: white
|
||||||
|
|
||||||
|
|
163
assets/css/y.css
Normal file
163
assets/css/y.css
Normal file
|
@ -0,0 +1,163 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
*::after, *::before {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
--background-color:hsl(180, 20%, 90%) {}
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
min-height: 100vh;
|
||||||
|
padding: 2rem;
|
||||||
|
color: rgba(0, 0, 0, 0.6);
|
||||||
|
background: var(--background-color);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2rem;
|
||||||
|
padding-top: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 + p {
|
||||||
|
font-size: 1.8rem;
|
||||||
|
padding: 2rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-ms-flex-wrap: wrap;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap {
|
||||||
|
margin: 2rem;
|
||||||
|
-webkit-transform-style: preserve-3d;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
-webkit-transform: perspective(100rem);
|
||||||
|
transform: perspective(100rem);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
--rX:0 {}
|
||||||
|
--rY:0 {}
|
||||||
|
--bX:50% {}
|
||||||
|
--bY:80% {}
|
||||||
|
width: 30rem;
|
||||||
|
height: 36rem;
|
||||||
|
border: 1px solid var(--background-color);
|
||||||
|
border-radius: 1.6rem;
|
||||||
|
padding: 4rem;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: end;
|
||||||
|
-ms-flex-align: end;
|
||||||
|
align-items: flex-end;
|
||||||
|
position: relative;
|
||||||
|
-webkit-transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
|
||||||
|
transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg));
|
||||||
|
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.1)), to(rgba(255, 255, 255, 0.1))), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9");
|
||||||
|
background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9");
|
||||||
|
background-position: var(--bX) var(--bY);
|
||||||
|
background-size: 40rem auto;
|
||||||
|
-webkit-box-shadow: 0 0 3rem 0.5rem rgba(0, 0, 0, 0.2);
|
||||||
|
box-shadow: 0 0 3rem 0.5rem rgba(0, 0, 0, 0.2);
|
||||||
|
-webkit-transition: -webkit-transform .6s 1s;
|
||||||
|
transition: -webkit-transform .6s 1s;
|
||||||
|
transition: transform .6s 1s;
|
||||||
|
transition: transform .6s 1s, -webkit-transform .6s 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container::before, .container::after {
|
||||||
|
content: "";
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: .3;
|
||||||
|
-webkit-transition: .3s;
|
||||||
|
transition: .3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container::before {
|
||||||
|
top: 2rem;
|
||||||
|
right: 2rem;
|
||||||
|
border-bottom-width: 0;
|
||||||
|
border-left-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container::after {
|
||||||
|
bottom: 2rem;
|
||||||
|
left: 2rem;
|
||||||
|
border-top-width: 0;
|
||||||
|
border-right-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--active {
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--portfolio {
|
||||||
|
-webkit-filter: hue-rotate(80deg) saturate(140%);
|
||||||
|
filter: hue-rotate(80deg) saturate(140%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--homepage {
|
||||||
|
-webkit-filter: hue-rotate(160deg) saturate(140%);
|
||||||
|
filter: hue-rotate(160deg) saturate(140%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--yugen {
|
||||||
|
-webkit-filter: hue-rotate(180deg) saturate(40%);
|
||||||
|
filter: hue-rotate(180deg) saturate(40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--thaldrin {
|
||||||
|
-webkit-filter: hue-rotate(180deg) saturate(140%);
|
||||||
|
filter: hue-rotate(180deg) saturate(140%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--kaito {
|
||||||
|
-webkit-filter: hue-rotate(180deg) saturate(140%);
|
||||||
|
filter: hue-rotate(180deg) saturate(140%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container--yiff {
|
||||||
|
-webkit-filter: hue-rotate(180deg) saturate(140%);
|
||||||
|
filter: hue-rotate(180deg) saturate(140%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.container p {
|
||||||
|
color: rgba(255, 255, 255, 0.6);
|
||||||
|
font-size: 2.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrap:hover .container::before, .wrap:hover .container::after {
|
||||||
|
width: calc(100% - 4rem);
|
||||||
|
height: calc(100% - 4rem);
|
||||||
|
}
|
||||||
|
/*# sourceMappingURL=y.css.map */
|
9
assets/css/y.css.map
Normal file
9
assets/css/y.css.map
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": [
|
||||||
|
"y.sass"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "y.css"
|
||||||
|
}
|
113
assets/css/y.sass
Normal file
113
assets/css/y.sass
Normal file
|
@ -0,0 +1,113 @@
|
||||||
|
*
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
&::after, &::before
|
||||||
|
margin: 0
|
||||||
|
padding: 0
|
||||||
|
box-sizing: border-box
|
||||||
|
|
||||||
|
html
|
||||||
|
font-size: 62.5%
|
||||||
|
|
||||||
|
body
|
||||||
|
--background-color:hsl(180, 20%, 90%)
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif
|
||||||
|
min-height: 100vh
|
||||||
|
padding: 2rem
|
||||||
|
color: hsla(0, 0%, 0%, 0.6)
|
||||||
|
background: var(--background-color)
|
||||||
|
text-align: center
|
||||||
|
|
||||||
|
h1
|
||||||
|
font-size: 3.2rem
|
||||||
|
padding-top: 2rem
|
||||||
|
|
||||||
|
+ p
|
||||||
|
font-size: 1.8rem
|
||||||
|
padding: 2rem 0 3rem
|
||||||
|
|
||||||
|
.main
|
||||||
|
display: flex
|
||||||
|
flex-wrap: wrap
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
|
||||||
|
.wrap
|
||||||
|
margin: 2rem
|
||||||
|
transform-style: preserve-3d
|
||||||
|
transform: perspective(100rem)
|
||||||
|
cursor: pointer
|
||||||
|
|
||||||
|
.container
|
||||||
|
--rX:0
|
||||||
|
--rY:0
|
||||||
|
--bX:50%
|
||||||
|
--bY:80%
|
||||||
|
width: 30rem
|
||||||
|
height: 36rem
|
||||||
|
border: 1px solid var(--background-color)
|
||||||
|
border-radius: 1.6rem
|
||||||
|
padding: 4rem
|
||||||
|
display: flex
|
||||||
|
align-items: flex-end
|
||||||
|
position: relative
|
||||||
|
transform: rotateX(calc(var(--rX) * 1deg)) rotateY(calc(var(--rY) * 1deg))
|
||||||
|
background: linear-gradient(hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.1)), url("https://images.unsplash.com/photo-1559113513-d5e09c78b9dd?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjF9")
|
||||||
|
background-position: var(--bX) var(--bY)
|
||||||
|
background-size: 40rem auto
|
||||||
|
box-shadow: 0 0 3rem 0.5rem hsla(0, 0%, 0%, 0.2)
|
||||||
|
transition: transform .6s 1s
|
||||||
|
|
||||||
|
&::before, &::after
|
||||||
|
content: ""
|
||||||
|
width: 2rem
|
||||||
|
height: 2rem
|
||||||
|
border: 1px solid #fff
|
||||||
|
position: absolute
|
||||||
|
z-index: 2
|
||||||
|
opacity: .3
|
||||||
|
transition: .3s
|
||||||
|
|
||||||
|
&::before
|
||||||
|
top: 2rem
|
||||||
|
right: 2rem
|
||||||
|
border-bottom-width: 0
|
||||||
|
border-left-width: 0
|
||||||
|
|
||||||
|
&::after
|
||||||
|
bottom: 2rem
|
||||||
|
left: 2rem
|
||||||
|
border-top-width: 0
|
||||||
|
border-right-width: 0
|
||||||
|
|
||||||
|
.container--active
|
||||||
|
transition: none
|
||||||
|
|
||||||
|
.container--portfolio
|
||||||
|
filter: hue-rotate(80deg) saturate(140%)
|
||||||
|
|
||||||
|
.container--homepage
|
||||||
|
filter: hue-rotate(160deg) saturate(140%)
|
||||||
|
|
||||||
|
.container--yugen
|
||||||
|
filter: hue-rotate(180deg) saturate(40%)
|
||||||
|
|
||||||
|
.container--thaldrin
|
||||||
|
filter: hue-rotate(180deg) saturate(140%)
|
||||||
|
|
||||||
|
.container--kaito
|
||||||
|
filter: hue-rotate(180deg) saturate(140%)
|
||||||
|
|
||||||
|
.container--yiff
|
||||||
|
filter: hue-rotate(180deg) saturate(140%)
|
||||||
|
|
||||||
|
.container p
|
||||||
|
color: hsla(0, 0%, 100%, 0.6)
|
||||||
|
font-size: 2.2rem
|
||||||
|
|
||||||
|
.wrap:hover .container
|
||||||
|
&::before, &::after
|
||||||
|
width: calc(100% - 4rem)
|
||||||
|
height: calc(100% - 4rem)
|
|
@ -74,3 +74,115 @@ const next = () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
next();
|
next();
|
||||||
|
|
||||||
|
// by
|
||||||
|
// abubakersaeed.netlify.com | @AbubakerSaeed96
|
||||||
|
// ============================================
|
||||||
|
|
||||||
|
// Inspiration:
|
||||||
|
// Tilt.js: https://gijsroge.github.io/tilt.js/
|
||||||
|
// Andy Merskin's parallax depth cards pen: https://codepen.io/andymerskin/full/XNMWvQ/
|
||||||
|
|
||||||
|
// Thank You for Viewing
|
||||||
|
|
||||||
|
class parallaxTiltEffect {
|
||||||
|
constructor({ element, tiltEffect }) {
|
||||||
|
this.element = element;
|
||||||
|
this.container = this.element.querySelector('.container');
|
||||||
|
this.size = [ 300, 360 ];
|
||||||
|
[ this.w, this.h ] = this.size;
|
||||||
|
|
||||||
|
this.tiltEffect = tiltEffect;
|
||||||
|
|
||||||
|
this.mouseOnComponent = false;
|
||||||
|
|
||||||
|
this.handleMouseMove = this.handleMouseMove.bind(this);
|
||||||
|
this.handleMouseEnter = this.handleMouseEnter.bind(this);
|
||||||
|
this.handleMouseLeave = this.handleMouseLeave.bind(this);
|
||||||
|
this.defaultStates = this.defaultStates.bind(this);
|
||||||
|
this.setProperty = this.setProperty.bind(this);
|
||||||
|
this.init = this.init.bind(this);
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseMove(event) {
|
||||||
|
const { offsetX, offsetY } = event;
|
||||||
|
|
||||||
|
let X;
|
||||||
|
let Y;
|
||||||
|
|
||||||
|
if (this.tiltEffect === 'reverse') {
|
||||||
|
X = (offsetX - this.w / 2) / 3 / 3;
|
||||||
|
Y = -(offsetY - this.h / 2) / 3 / 3;
|
||||||
|
} else if (this.tiltEffect === 'normal') {
|
||||||
|
X = -(offsetX - this.w / 2) / 3 / 3;
|
||||||
|
Y = (offsetY - this.h / 2) / 3 / 3;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setProperty('--rY', X.toFixed(2));
|
||||||
|
this.setProperty('--rX', Y.toFixed(2));
|
||||||
|
|
||||||
|
this.setProperty('--bY', 80 - (X / 4).toFixed(2) + '%');
|
||||||
|
this.setProperty('--bX', 50 - (Y / 4).toFixed(2) + '%');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseEnter() {
|
||||||
|
this.mouseOnComponent = true;
|
||||||
|
this.container.classList.add('container--active');
|
||||||
|
}
|
||||||
|
|
||||||
|
handleMouseLeave() {
|
||||||
|
this.mouseOnComponent = false;
|
||||||
|
this.defaultStates();
|
||||||
|
}
|
||||||
|
|
||||||
|
defaultStates() {
|
||||||
|
this.container.classList.remove('container--active');
|
||||||
|
this.setProperty('--rY', 0);
|
||||||
|
this.setProperty('--rX', 0);
|
||||||
|
this.setProperty('--bY', '80%');
|
||||||
|
this.setProperty('--bX', '50%');
|
||||||
|
}
|
||||||
|
|
||||||
|
setProperty(p, v) {
|
||||||
|
return this.container.style.setProperty(p, v);
|
||||||
|
}
|
||||||
|
|
||||||
|
init() {
|
||||||
|
this.element.addEventListener('mousemove', this.handleMouseMove);
|
||||||
|
this.element.addEventListener('mouseenter', this.handleMouseEnter);
|
||||||
|
this.element.addEventListener('mouseleave', this.handleMouseLeave);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const $ = (e) => document.querySelector(e);
|
||||||
|
|
||||||
|
const WrapPortfolio = new parallaxTiltEffect({
|
||||||
|
element: $('.wrap--portfolio'),
|
||||||
|
tiltEffect: 'reverse'
|
||||||
|
});
|
||||||
|
|
||||||
|
const WrapHomepage = new parallaxTiltEffect({
|
||||||
|
element: $('.wrap--homepage'),
|
||||||
|
tiltEffect: 'normal'
|
||||||
|
});
|
||||||
|
|
||||||
|
const WrapYugen = new parallaxTiltEffect({
|
||||||
|
element: $('.wrap--yugen'),
|
||||||
|
tiltEffect: 'reverse'
|
||||||
|
});
|
||||||
|
|
||||||
|
const WrapThaldrin = new parallaxTiltEffect({
|
||||||
|
element: $('.wrap--thaldrin'),
|
||||||
|
tiltEffect: 'reverse'
|
||||||
|
});
|
||||||
|
|
||||||
|
const WrapKaito = new parallaxTiltEffect({
|
||||||
|
element: $('.wrap--kaito'),
|
||||||
|
tiltEffect: 'reverse'
|
||||||
|
});
|
||||||
|
const WrapYiff = new parallaxTiltEffect({
|
||||||
|
element: $('.wrap--yiff'),
|
||||||
|
tiltEffect: 'reverse'
|
||||||
|
});
|
||||||
|
|
|
@ -4,16 +4,29 @@
|
||||||
<h1 class="title center">{{name}}<span class="text"></span></h1>
|
<h1 class="title center">{{name}}<span class="text"></span></h1>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{{!-- <div class="container">
|
||||||
{{#each portfolio.code}}
|
{{#each portfolio.code}}
|
||||||
<section id="{{this.name}}">
|
<section id="{{this.name}}">
|
||||||
<h1><a class="{{this.name}} center" id="{{this.id}}" target="_blank" href="{{this.source}}">{{this.name}}</a>
|
<h1><a class="{{this.name}} center" id="{{this.id}}" target="_blank" href="{{this.source}}">{{this.name}}</a>
|
||||||
<div class="buttons">
|
|
||||||
{{#each this.tags}}
|
|
||||||
<button class="{{this}}"><i><strong>{{this}}</strong></i></button>
|
|
||||||
{{/each}}
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
</div>
|
||||||
|
--}}
|
||||||
|
|
||||||
|
<section class="main">
|
||||||
|
{{#each portfolio.code}}
|
||||||
|
<div class="wrap wrap--{{id}}" >
|
||||||
|
<div class="container container--{{id}}">
|
||||||
|
<p>
|
||||||
|
{{name}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{{/each}}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</section>
|
||||||
<section id="Twitter">
|
<section id="Twitter">
|
||||||
<h1>
|
<h1>
|
||||||
<a class="art" href="https://twitter.com/floofydev" target="_blank">@floofydev</a>
|
<a class="art" href="https://twitter.com/floofydev" target="_blank">@floofydev</a>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
<meta http-equiv="X-UA-Compatible">
|
<meta http-equiv="X-UA-Compatible">
|
||||||
<title>{{host}} | ry</title>
|
<title>{{host}} | ry</title>
|
||||||
<script src="../assets/js/main.js" async></script>
|
<script src="../assets/js/main.js" async></script>
|
||||||
<link rel="stylesheet" type="text/css" href="../assets/css/x.css" />
|
<link rel="stylesheet" type="text/css" href="../assets/css/y.css" />
|
||||||
<meta name="msapplication-TileColor" content="#fcba03">
|
<meta name="msapplication-TileColor" content="#fcba03">
|
||||||
|
|
||||||
<meta name="theme-color" content="#fcba03">
|
<meta name="theme-color" content="#fcba03">
|
||||||
|
|
Loading…
Reference in a new issue