Browse Source

update for werewolf.design

master
hokkqi 2 weeks ago
parent
commit
7ab67d77d0
11 changed files with 2165 additions and 2310 deletions
  1. +197
    -197
      assets/css/x.css
  2. +8
    -8
      assets/css/x.css.map
  3. +111
    -111
      assets/css/x.sass
  4. +76
    -188
      assets/js/main.js
  5. +3
    -3
      index.js
  6. +1502
    -1502
      package-lock.json
  7. +28
    -28
      package.json
  8. +8
    -8
      run.sh
  9. +165
    -198
      server.js
  10. +30
    -30
      views/index.hbs
  11. +37
    -37
      views/layouts/main.hbs

+ 197
- 197
assets/css/x.css View File

@@ -1,198 +1,198 @@
@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;
font-family: 'Poppins', sans-serif;
}
a {
color: white;
text-decoration: none;
border: transparent;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
section:not(#home) {
height: 20vh;
border-style: none;
}
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;
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;
}
#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: #8a60da;
}
#thaldrin a {
color: #000000;
}
#thaldrin a:hover {
color: #6136b3;
}
#kaito {
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: #fcba03;
}
a.email:hover {
color: #e09900;
}
#Twitter {
background: #1DA1F2;
}
@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;
font-family: 'Poppins', sans-serif;
}
a {
color: white;
text-decoration: none;
border: transparent;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
section:not(#home) {
height: 20vh;
border-style: none;
}
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;
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;
}
#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: #8a60da;
}
#thaldrin a {
color: #000000;
}
#thaldrin a:hover {
color: #6136b3;
}
#kaito {
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: #fcba03;
}
a.email:hover {
color: #e09900;
}
#Twitter {
background: #1DA1F2;
}
/*# sourceMappingURL=x.css.map */

+ 8
- 8
assets/css/x.css.map View File

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

+ 111
- 111
assets/css/x.sass View File

@@ -1,112 +1,112 @@
@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
font-family: 'Poppins', sans-serif
a
color: white
text-decoration: none
border: transparent
justify-content: space-between
section:not(#home)
height: 20vh
border-style: none
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
align-items: center
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: #8a60da
a
color: #000000
&:hover
color: #6136b3
#kaito
background: #6033b4
a
color: #000000
&:hover
color: #441b8f
#yiff
background: #b32c54
a
color: #000000
&:hover
color: #9c0d38
a.email
color: #fcba03
&:hover
color: #e09900
#Twitter
@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
font-family: 'Poppins', sans-serif
a
color: white
text-decoration: none
border: transparent
justify-content: space-between
section:not(#home)
height: 20vh
border-style: none
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
align-items: center
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: #8a60da
a
color: #000000
&:hover
color: #6136b3
#kaito
background: #6033b4
a
color: #000000
&:hover
color: #441b8f
#yiff
background: #b32c54
a
color: #000000
&:hover
color: #9c0d38
a.email
color: #fcba03
&:hover
color: #e09900
#Twitter
background: #1DA1F2

+ 76
- 188
assets/js/main.js View File

@@ -1,188 +1,76 @@
// ——————————————————————————————————————————————————
// TextScramble
// ——————————————————————————————————————————————————

class TextScramble {
constructor(el) {
this.el = el;
this.chars = '!<>-_\\/[]{}—=+*^?#________';
this.update = this.update.bind(this);
}
setText(newText) {
const oldText = this.el.innerText;
const length = Math.max(oldText.length, newText.length);
const promise = new Promise((resolve) => (this.resolve = resolve));
this.queue = [];
for (let i = 0; i < length; i++) {
const from = oldText[i] || '';
const to = newText[i] || '';
const start = Math.floor(Math.random() * 40);
const end = start + Math.floor(Math.random() * 40);
this.queue.push({ from, to, start, end });
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise;
}
update() {
let output = '';
let complete = 0;
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i];
if (this.frame >= end) {
complete++;
output += to;
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar();
this.queue[i].char = char;
}
output += `<span class="dud">${char}</span>`;
} else {
output += from;
}
}
this.el.innerHTML = output;
if (complete === this.queue.length) {
this.resolve();
} else {
this.frameRequest = requestAnimationFrame(this.update);
this.frame++;
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}

// ——————————————————————————————————————————————————
// Example
// ——————————————————————————————————————————————————

const phrases = [ 'Portfolio', 'Discord', 'Twitter', 'Websites' ];

const el = document.querySelector('.text');
const fx = new TextScramble(el);

let counter = 0;
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 1000 * 1);
});
counter = (counter + 1) % phrases.length;
};

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'
});
// ——————————————————————————————————————————————————
// TextScramble
// ——————————————————————————————————————————————————
class TextScramble {
constructor(el) {
this.el = el;
this.chars = "!<>-_\\/[]{}—=+*^?#________";
this.update = this.update.bind(this);
}
setText(newText) {
const oldText = this.el.innerText;
const length = Math.max(oldText.length, newText.length);
const promise = new Promise((resolve) => (this.resolve = resolve));
this.queue = [];
for (let i = 0; i < length; i++) {
const from = oldText[i] || "";
const to = newText[i] || "";
const start = Math.floor(Math.random() * 40);
const end = start + Math.floor(Math.random() * 40);
this.queue.push({ from, to, start, end });
}
cancelAnimationFrame(this.frameRequest);
this.frame = 0;
this.update();
return promise;
}
update() {
let output = "";
let complete = 0;
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i];
if (this.frame >= end) {
complete++;
output += to;
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar();
this.queue[i].char = char;
}
output += `<span class="dud">${char}</span>`;
} else {
output += from;
}
}
this.el.innerHTML = output;
if (complete === this.queue.length) {
this.resolve();
} else {
this.frameRequest = requestAnimationFrame(this.update);
this.frame++;
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)];
}
}
// ——————————————————————————————————————————————————
// Example
// ——————————————————————————————————————————————————
const phrases = ["Portfolio", "Websites", "Discord", "Twitter"];
const el = document.querySelector(".text");
const fx = new TextScramble(el);
let counter = 0;
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 1000 * 1);
});
counter = (counter + 1) % phrases.length;
};
next();

+ 3
- 3
index.js View File

@@ -1,3 +1,3 @@
let server = require('./server');
server();
let server = require('./server');
server();

+ 1502
- 1502
package-lock.json
File diff suppressed because it is too large
View File


+ 28
- 28
package.json View File

@@ -1,28 +1,28 @@
{
"name": "portfolio",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"dependencies": {
"chalk": "^2.4.2",
"compression": "^1.7.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-handlebars": "^3.1.0",
"helmet": "^3.21.2",
"morgan": "^1.9.1",
"nodemon": "^2.0.2",
"shell-exec": "^1.0.2",
"simple-icons": "^1.20.0",
"ua-parser-js": "^0.7.20"
},
"devDependencies": {},
"scripts": {
"test": "nodemon run.js",
"start": "node run.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}
{
"name": "portfolio",
"version": "1.0.0",
"private": true,
"description": "",
"main": "index.js",
"dependencies": {
"chalk": "^2.4.2",
"compression": "^1.7.4",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-handlebars": "^3.1.0",
"helmet": "^3.21.2",
"morgan": "^1.9.1",
"nodemon": "^2.0.2",
"shell-exec": "^1.0.2",
"simple-icons": "^1.20.0",
"ua-parser-js": "^0.7.20"
},
"devDependencies": {},
"scripts": {
"test": "nodemon run.js",
"start": "node run.js"
},
"keywords": [],
"author": "",
"license": "ISC"
}

+ 8
- 8
run.sh View File

@@ -1,9 +1,9 @@
#!/bin/bash
FILE=index
NODE=node
while true;
do
$NODE $(pwd)/$FILE.js
#!/bin/bash
FILE=index
NODE=node
while true;
do
$NODE $(pwd)/$FILE.js
done

+ 165
- 198
server.js View File

@@ -1,198 +1,165 @@
//! 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 con = require('./constants');
let { port, hostname } = {
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);
}
},
},
})
);

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,
})
);
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(" ");
})
);

/* app.use([ '/portfolio', '/p' ], require('./routes/portfolio'));
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) => {
let 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"],
},
];
let yiff = {
name: "yiff",
section: "yiffsec",
id: "yiff",
source: "/yiff",
tags: ["Node", "NPM"],
};
if (
!["p.hkki.cc", "p.hokkqido.download"].includes(req.hostname.toLowerCase())
) {
code.push(yiff);
}
res.render("index", {
layout: "main",
name: `hoqi/`,
host: req.hostname,
portfolio: { code },
});
});

app.get("/portfolio", async (req, res) => {
res.redirect("https://werewolf.codes/r/portfolio");
});
app.get("/homepage", async (req, res) => {
res.redirect("https://werewolf.codes/r/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/hokkqido/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("/benji", async (req, res) => {
res.redirect("https://benji.monster");
});

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}`);
});
};
//! 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 con = require('./constants');
let { port, hostname } = {
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);
}
},
},
})
);
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,
})
);
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(" ");
})
);
module.exports = (client) => {
app.get("/", async (req, res) => {
let 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"],
},
];
let yiff = {
name: "yiff",
section: "yiffsec",
id: "yiff",
source: "/yiff",
tags: ["Node", "NPM"],
};
if (
!["p.hkki.cc", "p.hokkqido.download"].includes(req.hostname.toLowerCase())
) {
code.push(yiff);
}
res.render("index", {
layout: "main",
name: `hokkqi/`,
host: req.hostname,
portfolio: { code },
});
});
app.get("/portfolio", async (req, res) => {
res.redirect("https://werewolf.codes/h/portfolio");
});
app.get("/homepage", async (req, res) => {
res.redirect("https://werewolf.codes/h/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/hokkqido/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("/benji", async (req, res) => {
res.redirect("https://benji.monster");
});
app.get("/nonstopworld", async (req, res) => {
res.redirect("https://nonstop.world");
});
app.listen(port /* , hostname */, () => {
console.log(`${chalk.blue("[ Server ]")} Listening on ${port}`);
});
};

+ 30
- 30
views/index.hbs View File

@@ -1,31 +1,31 @@
<body>
<section id="home">
<h1 class="title center">{{name}}<span class="text"></span></h1>
</section>
<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>
<section id="contact">
<div>
<p class="contactme">hire me for a project?</p>
<a class="email" href="mailto:howl@werewolf.computer">howl@werewolf.computer</a>
</div>
</section>
{{!-- <section id="Twitter">
<h1>
<a class="art" href="https://twitter.com/floofydev" target="_blank">@floofydev</a>
</h1>
</section> --}}
<body>
<section id="home">
<h1 class="title center">{{name}}<span class="text"></span></h1>
</section>
<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>
<section id="contact">
<div>
<p class="contactme">hire me for a project?</p>
<a class="email" href="mailto:howl@werewolf.computer">howl@werewolf.computer</a>
</div>
</section>
{{!-- <section id="Twitter">
<h1>
<a class="art" href="https://twitter.com/floofydev" target="_blank">@floofydev</a>
</h1>
</section> --}}
</body>

+ 37
- 37
views/layouts/main.hbs View File

@@ -1,38 +1,38 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<title>{{host}} | hokkqi</title>
<script src="../assets/js/main.js" async></script>
<link rel="stylesheet" type="text/css" href="../assets/css/x.css" />
<meta name="msapplication-TileColor" content="#e67e22">
<meta name="theme-color" content="#e67e22">
<meta property="og:title" content="hokkqi">
<meta property="og:type" content="website">
<meta property="og:description" content="portfolio for ya boi hokkqi">
<meta property="og:url" content="https://{{host}}">
{{!-- <meta property="og:image"
content="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png">
--}}
<meta property="og:description" content="Portfolio">
{{!-- <link rel="icon" type="image/png"
href="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png" sizes="32x32">
<link rel="icon" type="image/png"
href="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180"
href="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png"> --}}
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
{{{body}}}
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<meta http-equiv="X-UA-Compatible">
<title>{{host}} | hokkqi</title>
<script src="../assets/js/main.js" async></script>
<link rel="stylesheet" type="text/css" href="../assets/css/x.css" />
<meta name="msapplication-TileColor" content="#e67e22">
<meta name="theme-color" content="#e67e22">
<meta property="og:title" content="hokkqi">
<meta property="og:type" content="website">
<meta property="og:description" content="portfolio for ya boi hokkqi">
<meta property="og:url" content="https://{{host}}">
{{!-- <meta property="og:image"
content="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png">
--}}
<meta property="og:description" content="Portfolio">
{{!-- <link rel="icon" type="image/png"
href="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png" sizes="32x32">
<link rel="icon" type="image/png"
href="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png" sizes="96x96">
<link rel="apple-touch-icon" sizes="180x180"
href="https://raw.githubusercontent.com/EndlessHosting/assets/master/images/PFPs/code.png"> --}}
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body>
{{{body}}}
</body>
</html>

Loading…
Cancel
Save