diff --git a/assets/css/x.css b/assets/css/x.css index 39c4a9a..443bb1f 100644 --- a/assets/css/x.css +++ b/assets/css/x.css @@ -10,14 +10,14 @@ body { font-family: 'Poppins', sans-serif; } -a:not(#yugen) { +a { color: white; text-decoration: none; border: transparent; } -a { - color: white; +a#yugen { + color: black; text-decoration: none; border-bottom: 1vh solid #dadada; border-right: 1vh solid #dadada; diff --git a/assets/css/x.css.map b/assets/css/x.css.map index ad0b7a2..098eca2 100644 --- a/assets/css/x.css.map +++ b/assets/css/x.css.map @@ -1,6 +1,6 @@ { "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": [ "x.sass" ], diff --git a/assets/css/x.sass b/assets/css/x.sass index e9e0301..b83ad7a 100644 --- a/assets/css/x.sass +++ b/assets/css/x.sass @@ -10,13 +10,13 @@ body color: white font-family: 'Poppins', sans-serif -a:not(#yugen) +a color: white text-decoration: none border: transparent -a - color: white +a#yugen + color: black text-decoration: none border-bottom: 1vh solid #dadada border-right: 1vh solid #dadada @@ -72,4 +72,5 @@ button font-size: 2vw border-style: none padding: 1vh - background: white \ No newline at end of file + background: white + diff --git a/assets/css/y.css b/assets/css/y.css new file mode 100644 index 0000000..6d2b462 --- /dev/null +++ b/assets/css/y.css @@ -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 */ \ No newline at end of file diff --git a/assets/css/y.css.map b/assets/css/y.css.map new file mode 100644 index 0000000..6b4fe9b --- /dev/null +++ b/assets/css/y.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "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", + "sources": [ + "y.sass" + ], + "names": [], + "file": "y.css" +} \ No newline at end of file diff --git a/assets/css/y.sass b/assets/css/y.sass new file mode 100644 index 0000000..ee86ae8 --- /dev/null +++ b/assets/css/y.sass @@ -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) \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index d8dd4ce..9280182 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -74,3 +74,115 @@ const 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' +}); diff --git a/views/index.hbs b/views/index.hbs index 0ca24de..ccec1d9 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -4,17 +4,30 @@

{{name}}

- {{#each portfolio.code}} +{{!--
+ {{#each portfolio.code}}

{{this.name}} -
- {{#each this.tags}} - - {{/each}} -

{{/each}} -
+
+ --}} + +
+ {{#each portfolio.code}} +
+
+

+ {{name}} +

+
+
+ {{/each}} + + + +
+

@floofydev

diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs index 95f8592..2616502 100644 --- a/views/layouts/main.hbs +++ b/views/layouts/main.hbs @@ -6,7 +6,7 @@ {{host}} | ry - +