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

new layout

Browse source
This commit is contained in:
ry 2020-02-25 18:32:01 +01:00
parent c86bc19515
commit 59d8a45efd
9 changed files with 401 additions and 515 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

192
assets/css/x.css
View file

@ -1,3 +1,4 @@
@import url("https://fonts.googleapis.com/css?family=Poiret+One&display=swap");
@import url("https://fonts.googleapis.com/css?family=Poppins&display=swap");
* {
margin: 0;
@ -14,24 +15,56 @@ a {
color: white;
text-decoration: none;
border: transparent;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
a#yugen {
color: black;
text-decoration: none;
border-bottom: 1vh solid #dadada;
border-right: 1vh solid #dadada;
border-left: 1vh solid #dadada;
border-top: 1vh solid #dadada;
}
section {
height: 100vh;
section:not(#home) {
height: 20vh;
border-style: none;
}
h1 {
section#contact {
height: 40vh;
font-size: 7vw;
height: 101%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.email, .contactme {
font-size: 6vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
font-family: 'Poiret One', sans-serif;
}
.email {
text-decoration: underline;
font-style: italic;
}
h1 {
font-size: 8vw;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
@ -49,54 +82,117 @@ h1 {
}
#home {
font-size: 8vw !important;
background-color: black;
color: white;
font-style: italic;
}
#portfolio {
background: #f7665c;
}
#portfolio a {
color: #000000;
}
#portfolio a:hover {
color: #d63631;
}
#homepage {
background: #78db6f;
}
#homepage a {
color: #000000;
}
#homepage a:hover {
color: #4c9da0;
}
#yugen {
background: #5ad350;
}
#yugen a {
color: #000000;
}
#yugen a:hover {
color: #329c28;
}
#sor {
background: #c669db;
}
#sor a {
color: #000000;
}
#sor a:hover {
color: #a24ab6;
}
#benji {
background: #7272d1;
}
#benji a {
color: #000000;
}
#benji a:hover {
color: #4646a3;
}
#thaldrin {
background: #ff841f;
background: #8a60da;
}
#thaldrin a {
color: #000000;
}
#thaldrin a:hover {
color: #6136b3;
}
#kaito {
background: #96400e;
background: #6033b4;
}
#kaito a {
color: #000000;
}
#kaito a:hover {
color: #441b8f;
}
#yiff {
background: #b32c54;
}
#yiff a {
color: #000000;
}
#yiff a:hover {
color: #9c0d38;
}
a.email {
color: #9c0d38;
}
a.email:hover {
color: #aa3055;
}
#Twitter {
background: #1DA1F2;
}
#homepage {
background: #d83333;
}
#yiff {
background: #e01653;
}
#portfolio {
background: #2022a0;
}
#yugen {
background: #ffffff;
color: #000;
padding: 2vw;
}
#yugen button {
background: #ffffff;
color: #000;
}
.buttons {
display: inline;
}
button {
font-size: 2vw;
border-style: none;
padding: 1vh;
background: white;
}
/*# sourceMappingURL=x.css.map */

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,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",
"mappings": "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",
"sources": [
"x.sass"
],

122
assets/css/x.sass
View file

@ -1,10 +1,10 @@
@import url('https://fonts.googleapis.com/css?family=Poiret+One&display=swap')
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap')
*
margin: 0
padding: 0
body
background-color: black
color: white
@ -13,21 +13,35 @@ body
a
color: white
text-decoration: none
border: transparent
border: transparent
justify-content: space-between
a#yugen
color: black
text-decoration: none
border-bottom: 1vh solid #dadada
border-right: 1vh solid #dadada
border-left: 1vh solid #dadada
border-top: 1vh solid #dadada
section
height: 100vh
section:not(#home)
height: 20vh
border-style: none
h1
section#contact
height: 40vh
font-size: 7vw
height: 101%
display: flex
flex-direction: column
align-items: center
justify-content: center
.email, .contactme
font-size: 6vw
display: flex
align-items: center
justify-content: center
font-family: 'Poiret One', sans-serif
.email
text-decoration: underline
font-style: italic
h1
font-size: 8vw
height: 100%
display: flex
flex-direction: column
@ -35,42 +49,64 @@ h1
justify-content: center
#home
font-size: 8vw !important
background-color: black
color: white
font-style: italic
#portfolio
background: #f7665c
a
color: #000000
&:hover
color: #d63631
#homepage
background: #78db6f
a
color: #000000
&:hover
color: #4c9da0
#yugen
background: #5ad350
a
color: #000000
&:hover
color: #329c28
#sor
background: #c669db
a
color: #000000
&:hover
color: #a24ab6
#benji
background: #7272d1
a
color: #000000
&:hover
color: #4646a3
#thaldrin
background: #ff841f
background: #8a60da
a
color: #000000
&:hover
color: #6136b3
#kaito
background: #96400e
background: #6033b4
a
color: #000000
&:hover
color: #441b8f
#yiff
background: #b32c54
a
color: #000000
&:hover
color: #9c0d38
a.email
color: #9c0d38
&:hover
color: #aa3055
#Twitter
background: #1DA1F2
#homepage
background: #d83333
#yiff
background: #e01653
#portfolio
background: #2022a0
#yugen
background: #ffffff
color: #000
padding: 2vw
button
background: #ffffff
color: #000
.buttons
display: inline
button
font-size: 2vw
border-style: none
padding: 1vh
background: white
background: #1DA1F2

163
assets/css/y.css
View file

@ -1,163 +0,0 @@
* {
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
View file

@ -1,9 +0,0 @@
{
"version": 3,
"mappings": "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",
"sources": [
"y.sass"
],
"names": [],
"file": "y.css"
}

113
assets/css/y.sass
View file

@ -1,113 +0,0 @@
*
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)

277
server.js
View file

@ -1,64 +1,64 @@
//! Deps
const express = require('express');
const helmet = require('helmet');
const compression = require('compression');
const cors = require('cors');
const morgan = require('morgan');
const chalk = require('chalk');
const hbs = require('express-handlebars');
const UA = require('ua-parser-js');
const exec = require('shell-exec');
const simpleIcons = require('simple-icons');
const express = require("express");
const helmet = require("helmet");
const compression = require("compression");
const cors = require("cors");
const morgan = require("morgan");
const chalk = require("chalk");
const hbs = require("express-handlebars");
const UA = require("ua-parser-js");
const exec = require("shell-exec");
const simpleIcons = require("simple-icons");
//const con = require('./constants');
let { port, hostname } = {
port: 3621
//hostname: '67.182.206.28'
port: 3621
//hostname: '67.182.206.28'
};
const app = express();
app.engine(
'hbs',
hbs({
extname: 'hbs',
defaultView: 'default',
helpers: {
ifeq: function(a, b, options) {
if (a === b) {
return options.fn(this);
}
}
}
})
"hbs",
hbs({
extname: "hbs",
defaultView: "default",
helpers: {
ifeq: function(a, b, options) {
if (a === b) {
return options.fn(this);
}
}
}
})
);
app.set('view engine', 'hbs');
app.set('json spaces', 4);
app.use('/assets', express.static('./assets'));
app.set('view options', {
layout: false
app.set("view engine", "hbs");
app.set("json spaces", 4);
app.use("/assets", express.static("./assets"));
app.set("view options", {
layout: false
});
app.use(express.json());
app.use(
express.urlencoded({
extended: true
})
express.urlencoded({
extended: true
})
);
app.use(helmet());
app.use(compression());
app.use(cors());
// Logging
app.use(
morgan((tokens, req, res) => {
return [
chalk.hex('#34ace0').bold(`[ ${tokens.method(req, res)} ]`),
chalk.hex('#ffb142').bold(tokens.status(req, res)),
chalk.hex('#ff5252').bold(req.hostname + tokens.url(req, res)),
chalk.hex('#2ed573').bold(tokens['response-time'](req, res) + 'ms'),
chalk.hex('#f78fb3').bold('@ ' + tokens.date(req, res))
].join(' ');
})
morgan((tokens, req, res) => {
return [
chalk.hex("#34ace0").bold(`[ ${tokens.method(req, res)} ]`),
chalk.hex("#ffb142").bold(tokens.status(req, res)),
chalk.hex("#ff5252").bold(req.hostname + tokens.url(req, res)),
chalk.hex("#2ed573").bold(tokens["response-time"](req, res) + "ms"),
chalk.hex("#f78fb3").bold("@ " + tokens.date(req, res))
].join(" ");
})
);
/* app.use([ '/portfolio', '/p' ], require('./routes/portfolio'));
@ -66,83 +66,126 @@ app.use('/lore', require('./routes/lore'));
app.use('/art', require('./routes/art')); */
//app.use('/p', require('./routes/p'));
module.exports = (client) => {
app.get('/', async (req, res) => {
res.render('index', {
layout: 'main',
name: `ry/`,
host: req.hostname,
portfolio: {
code: [
{
name: 'portfolio',
id: 'portfolio',
source: '/portfolio',
tags: [ 'Node', 'Handlebars', 'SASS' ]
},
{ name: 'homepage', id: 'homepage', source: '/homepage', tags: [ 'Node', 'Handlebars', 'SCSS' ] },
{ name: 'yugen.work', id: 'yugen', source: '/yugen', tags: [ 'Node', 'Handlebars', 'SCSS' ] },
{
name: 'thaldrin',
id: 'thaldrin',
source: '/thaldrin',
tags: [ 'Node', 'Handlebars', 'SCSS', 'Discord' ]
},
{ name: 'kaito', id: 'kaito', source: '/kaito', tags: [ 'Node', 'Twitter', 'Discord' ] },
{ name: 'yiff', id: 'yiff', source: '/yiff', tags: [ 'Node', 'NPM' ] }
]
}
});
});
module.exports = client => {
app.get("/", async (req, res) => {
res.render("index", {
layout: "main",
name: `ry/`,
host: req.hostname,
portfolio: {
code: [
{
name: "portfolio",
section: "portfoliosec",
id: "portfolio",
source: "/portfolio",
tags: ["Node", "Handlebars", "SASS"]
},
{
name: "homepage",
section: "homepagesec",
id: "homepage",
source: "/homepage",
tags: ["Node", "Handlebars", "SCSS"]
},
{
name: "yugen.work",
section: "yugensec",
id: "yugen",
source: "/yugen",
tags: ["Node", "Handlebars", "SCSS"]
},
{
name: "sor.dog",
section: "sorsec",
id: "sor",
source: "/sor",
tags: ["Node", "Handlebars", "SCSS"]
},
{
name: "benji.monster",
section: "benjisec",
id: "benji",
source: "/benji",
tags: ["Node", "Handlebars", "SCSS"]
},
{
name: "thaldrin",
section: "thaldrinsec",
id: "thaldrin",
source: "/thaldrin",
tags: ["Node", "Handlebars", "SCSS", "Discord"]
},
{
name: "kaito",
section: "kaitosec",
id: "kaito",
source: "/kaito",
tags: ["Node", "Twitter", "Discord"]
},
{
name: "yiff",
section: "yiffsec",
id: "yiff",
source: "/yiff",
tags: ["Node", "NPM"]
}
]
}
});
});
app.get('/portfolio', async (req, res) => {
res.redirect('https://gitdab.com/y/shyzu.link');
});
app.get('/homepage', async (req, res) => {
res.redirect('https://gitdab.com/y/website');
});
app.get('/yugen', async (req, res) => {
res.redirect('https://yugen.work');
});
app.get('/thaldrin', async (req, res) => {
res.redirect('https://thaldr.in/source');
});
app.get('/kaito', async (req, res) => {
res.redirect('https://github.com/codepupper/kaito');
});
app.get('/yiff', async (req, res) => {
res.redirect('https://npm.im/yiff');
});
app.get("/portfolio", async (req, res) => {
res.redirect("https://gitdab.com/y/shyzu.link");
});
app.get("/homepage", async (req, res) => {
res.redirect("https://gitdab.com/y/website");
});
app.get("/yugen", async (req, res) => {
res.redirect("https://yugen.work");
});
app.get("/thaldrin", async (req, res) => {
res.redirect("https://thaldr.in/source");
});
app.get("/kaito", async (req, res) => {
res.redirect("https://github.com/codepupper/kaito");
});
app.get("/yiff", async (req, res) => {
res.redirect("https://npm.im/yiff");
});
app.get("/sor", async (req, res) => {
res.redirect("https://sor.dog");
});
app.get('/update', async (req, res) => {
//console.log(req.headers['user-agent']);
if (req.headers.authorization === con.updateToken) {
await exec('git pull')
.then((r) => {
console.log('Pulled latest changes');
res.status(200).jsonp({
success: true,
message: 'Successfully pulled latest changes'
});
process.exit();
//trying.edit('```fix\n' + r.stdout + '```');
})
.catch((error) => {
res.status(400).jsonp({
success: false,
message: error.message
});
console.error(error);
});
} else {
res.status(400).jsonp({
success: false,
message: 'You are not authorized to access this Endpoint'
});
}
});
app.get("/update", async (req, res) => {
//console.log(req.headers['user-agent']);
if (req.headers.authorization === con.updateToken) {
await exec("git pull")
.then(r => {
console.log("Pulled latest changes");
res.status(200).jsonp({
success: true,
message: "Successfully pulled latest changes"
});
process.exit();
//trying.edit('```fix\n' + r.stdout + '```');
})
.catch(error => {
res.status(400).jsonp({
success: false,
message: error.message
});
console.error(error);
});
} else {
res.status(400).jsonp({
success: false,
message: "You are not authorized to access this Endpoint"
});
}
});
app.listen(port /* , hostname */, () => {
console.log(`${chalk.blue('[ Server ]')} Listening on ${port}`);
});
app.listen(port /* , hostname */, () => {
console.log(`${chalk.blue("[ Server ]")} Listening on ${port}`);
});
};

36
views/index.hbs
View file

@ -4,32 +4,28 @@
<h1 class="title center">{{name}}<span class="text"></span></h1>
</section>
{{!-- <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="container">
{{#each portfolio.code}}
<section id="{{this.id}}">
<h1><a class="{{this.id}} center" id="{{this.section}}" target="_blank" href="{{this.source}}">{{this.name}}</a>
</section>
{{/each}}
</div>
</section>
{{/each}}
</div>
--}}
<section id="contact">
<section class="main">
{{#each portfolio.code}}
<div class="wrap wrap--{{id}}" >
<div class="container container--{{id}}">
<p>
{{name}}
</p>
<div>
<p class="contactme">hire me for a project?</p>
<a class="email" href="mailto:howl@werewolf.computer">howl@werewolf.computer</a>
</div>
</div>
{{/each}}
</section>
</section>
<section id="Twitter">
{{!-- <section id="Twitter">
<h1>
<a class="art" href="https://twitter.com/floofydev" target="_blank">@floofydev</a>
</h1>
</section>
</section> --}}
</body>

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/y.css" />
<link rel="stylesheet" type="text/css" href="../assets/css/x.css" />
<meta name="msapplication-TileColor" content="#fcba03">
<meta name="theme-color" content="#fcba03">