rework portfolio

2020-02-12 10:42:27 +01:00 · 2020-02-12 10:42:27 +01:00 · c86bc19515
commit c86bc19515
parent 0adfc08c1a
9 changed files with 427 additions and 16 deletions
--- 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;
--- 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"
    ],
--- 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
@ -73,3 +73,4 @@ button
        border-style: none
        padding: 1vh
        background: white
+
--- a/assets/css/y.css
+++ 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 */
--- a/assets/css/y.css.map
+++ b/assets/css/y.css.map
@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "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",
+    "sources": [
+        "y.sass"
+    ],
+    "names": [],
+    "file": "y.css"
+}
--- a/assets/css/y.sass
+++ 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)
--- 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'
+});
--- a/views/index.hbs
+++ b/views/index.hbs
@ -4,17 +4,30 @@
    <h1 class="title center">{{name}}<span class="text"></span></h1>
  </section>

-  {{#each portfolio.code}}
+{{!--    <div class="container">
+      {{#each portfolio.code}}
  <section id="{{this.name}}">
    <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>
  {{/each}}
-  <section id="Twitter">
+  </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">
    <h1>
      <a class="art" href="https://twitter.com/floofydev" target="_blank">@floofydev</a>
    </h1>
--- a/views/layouts/main.hbs
+++ b/views/layouts/main.hbs
@ -6,7 +6,7 @@
  <meta http-equiv="X-UA-Compatible">
  <title>{{host}} | ry</title>
  <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="theme-color" content="#fcba03">