From 59d8a45efd9d5a28394098a957fc09dcfc034349 Mon Sep 17 00:00:00 2001 From: ry Date: Tue, 25 Feb 2020 18:32:01 +0100 Subject: [PATCH] new layout --- assets/css/x.css | 192 +++++++++++++++++++++------- assets/css/x.css.map | 2 +- assets/css/x.sass | 122 +++++++++++------- assets/css/y.css | 163 ------------------------ assets/css/y.css.map | 9 -- assets/css/y.sass | 113 ----------------- server.js | 277 ++++++++++++++++++++++++----------------- views/index.hbs | 36 +++--- views/layouts/main.hbs | 2 +- 9 files changed, 401 insertions(+), 515 deletions(-) delete mode 100644 assets/css/y.css delete mode 100644 assets/css/y.css.map delete mode 100644 assets/css/y.sass diff --git a/assets/css/x.css b/assets/css/x.css index 443bb1f..9684104 100644 --- a/assets/css/x.css +++ b/assets/css/x.css @@ -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 */ \ No newline at end of file diff --git a/assets/css/x.css.map b/assets/css/x.css.map index 098eca2..862009b 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,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" ], diff --git a/assets/css/x.sass b/assets/css/x.sass index b83ad7a..ebf911d 100644 --- a/assets/css/x.sass +++ b/assets/css/x.sass @@ -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 \ No newline at end of file diff --git a/assets/css/y.css b/assets/css/y.css deleted file mode 100644 index 6d2b462..0000000 --- a/assets/css/y.css +++ /dev/null @@ -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 */ \ No newline at end of file diff --git a/assets/css/y.css.map b/assets/css/y.css.map deleted file mode 100644 index 6b4fe9b..0000000 --- a/assets/css/y.css.map +++ /dev/null @@ -1,9 +0,0 @@ -{ - "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 deleted file mode 100644 index ee86ae8..0000000 --- a/assets/css/y.sass +++ /dev/null @@ -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) \ No newline at end of file diff --git a/server.js b/server.js index 8c97c7c..d92923d 100644 --- a/server.js +++ b/server.js @@ -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}`); + }); }; diff --git a/views/index.hbs b/views/index.hbs index ccec1d9..6cd70f0 100644 --- a/views/index.hbs +++ b/views/index.hbs @@ -4,32 +4,28 @@

{{name}}

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

{{this.name}} +
+ {{#each portfolio.code}} +
+

{{this.name}} +

+ {{/each}} +
+ +

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

- {{name}} -

+
+

hire me for a project?

+
-
- {{/each}} +
- -
-
+ {{!--

@floofydev

-
+
--}} \ No newline at end of file diff --git a/views/layouts/main.hbs b/views/layouts/main.hbs index 2616502..95f8592 100644 --- a/views/layouts/main.hbs +++ b/views/layouts/main.hbs @@ -6,7 +6,7 @@ {{host}} | ry - +