lio
/
portfolio
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

rework portfolio

This commit is contained in:
codepupper 2020-02-12 10:42:27 +01:00
parent 0adfc08c1a
commit c86bc19515
9 changed files with 427 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/x.css
View File

@ -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;

2
assets/css/x.css.map
View File

@ -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"
],

9
assets/css/x.sass
View File

@ -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
background: white

163
assets/css/y.css Normal file
View 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
View 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
View 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)

112
assets/js/main.js
View File

@ -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'
});

27
views/index.hbs
View File

@ -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>

2
views/layouts/main.hbs
View File

@ -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">