More info on page

This commit is contained in:
Bingus_Violet 2024-02-12 11:12:15 -06:00
parent 0fb3204df1
commit bebacd675d
5 changed files with 164 additions and 131 deletions

View file

@ -45,25 +45,45 @@ function converter(html) {
html = html.replaceAll(term, replacement)
}
while (html.includes("{PATH_")) {
var pagePath = html.substring(html.indexOf("{PATH_"))
pagePath = pagePath.substring(6, pagePath.indexOf('}'))
var stringIndex = `{PATH_${pagePath}}`
pagePath = pagePath.toLowerCase()
var pageHTML = fs.readFileSync(path.join(__dirname, 'static', pagePath, 'index.html')).toString()
pageHTML = pageHTML.substring(pageHTML.indexOf('<body>') + 6, pageHTML.indexOf('</body>'))
html = html.replace(stringIndex, pageHTML)
}
return html
}
module.exports = {
middleWare: function (req, res, next) {
var filePath = req.baseUrl + req.path
if (filePath.trim() == "/") {
filePath = "/index.html"
var filePath = (req.baseUrl + req.path).trim()
if (filePath.includes(".html") || filePath.includes(".css")) {
} else {
if (filePath.charAt(filePath.length - 1) != '/') {
res.redirect(filePath + '/')
return
}
filePath = path.join(filePath, '/index.html')
}
filePath = path.join(__dirname, 'static', filePath || 'index.html')
if (fs.existsSync(filePath)) {
var data = fs.readFileSync(filePath).toString()
if (req.path.includes("style.css")) {
if (req.path.includes(".css")) {
res.setHeader("Content-Type", "text/css")
res.send(data)
} else {
data = converter(data)
res.send(data)
res.send(minify.minify(data))
}
} else {
res.status(404).send(`

View file

@ -3,6 +3,7 @@
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link rel="stylesheet" type="text/css" href="./root.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
@ -22,48 +23,32 @@
</head>
<body>
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit
{COMMIT_COUNT}</span><br></h1>
<main>
<h1 class="animatedTitle">Welcome to <span class="mainTitle">Violet's Purgatory</span><span class="note">Commit {COMMIT_COUNT}</span><br></h1>
<main class="animatedMain">
<p>{RANDOM_QUOTE}</p>
<div class="container-fluid row" id="card">
<div id="card">
<h2>Violet</h2>
<div style="display: flex; justify-content: center; align-items: center;">
<img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
<div>
<p><a href="pronouns">They/Them</a></p>
<p><a>They/Them</a></p>
<p>Developer</p>
<p>{DISCORD_STATUS}</p>
</div>
</div>
<div>
<br>
<!-- <span style="white-space: nowrap;"> -->
<!-- <p class="chip"><a href="https://status.violets-purgatory.dev">Status</a></p> -->
<p class="chip"><a href="https://ko-fi.com/bingus_violet" style="color: rgb(255, 100, 100);">Donate</a></p>
<p class="chip"><a href="https://fs.violets-purgatory.dev">FileShare</a></p>
<!-- <p class="chip"><a href="./socials">Socials</a></p> -->
<!-- <p class="chip"><a href="./projects">Projects</a></p> -->
<!-- </span> -->
<!-- <p class="chip"><a href="./extras">Extras</a></p> -->
<!-- <br> -->
<!-- <span style="white-space: nowrap;"> -->
<p class="chip"><a href="https://blog.violets-purgatory.dev">Blog</a></p>
<!-- <p class="chip"><a href="./faq">FAQ</a></p> -->
<p class="chip"><a href="https://beta.violets-purgatory.dev">Dev Branch</a></p>
<!-- </span> -->
<br>
<p style="padding: 10px;">Hi! I'm Violet, a 15 year old web and game developer. <br>
I aspire to make fast and javascript free websites! I'm currently learning the Godot Engine, and
have been
becoming quite fluent in NodeJS.</p>
I aspire to make fast and javascript free websites! I'm currently learning the Godot Engine, and have been becoming quite fluent in NodeJS.</p>
</div>
</div>
<p>Although my site is pretty barebones at the moment due to a recent rewrite, I hope to continue with this
passion and update this website along with it.
</p>
<h1>Links</h1>
<br>
<a class="chip" href="https://beta.violets-purgatory.dev">Beta site</a>
<a class="chip" href="https://blog.violets-purgatory.dev">Blog</a>
<a class="chip" href="https://fs.violets-purgatory.dev">Clipdump</a>
</main>
</body>

90
static/root.css Normal file
View file

@ -0,0 +1,90 @@
/*
This is the CSS file for the root page. Only put changes in here
intended for the main page of the site!
*/
.mainTitle {
font-size: 2.75rem;
color: rgb(215, 80, 255);
display: block;
padding-top: 5px;
line-height: 2.2rem;
}
#card {
background-color: rgb(15, 5, 80);
padding: 15px;
border: 2px white solid;
margin: 20px auto;
width: 95%;
max-width: 800px;
z-index: 3;
position: relative;
}
.animatedTitle {
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
margin: auto;
max-width: 75%;
/* outline: 1px white solid; */
}
.animatedMain {
opacity: 1;
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.pfp {
border-radius: 15px;
border: darkgray 4px solid;
width: 60%;
aspect-ratio: 1/1;
transform: scale(0.9);
border-radius: 50%;
}
@keyframes mainText {
0% {
transform: translateY(calc(50vh - 6rem)) scale(1.5);
opacity: 0;
height: 4rem;
}
50% {
opacity: 1;
height: 4rem;
transform: translateY(calc(50vh - 6rem)) scale(1.25);
}
100% {
transform: translateY(0) scale(1);
}
}
@keyframes fadeDelay {
0% {
opacity: 0;
}
66% {
opacity: 0;
transform: translateY(25vh)
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes hideContent {
0% {
overflow-y: hidden;
overflow-x: hidden;
}
100% {
overflow-y: hidden;
overflow-x: hidden;
}
}

View file

@ -1,3 +1,10 @@
/*
This is the GLOBAL css file.
Any changes made in here, will apply to the ENTIRE site.
Only put changes here if you intend to put changes across
the whole site!
*/
@font-face {
font-display: swap;
font-family: 'Rubik';
@ -15,6 +22,12 @@
color: white;
}
main:nth-of-type(1) {
width: 90%;
max-width: 1000px;
margin: auto;
}
body {
background-color: black;
overflow-x: hidden;
@ -31,14 +44,6 @@ body {
animation: hideContent 2.5s;
}
main {
opacity: 1;
animation: fadeDelay 3s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 90%;
max-width: 1000px;
margin: auto;
}
a {
color: rgb(175, 225, 255);
display: inline-block;
@ -76,14 +81,6 @@ a {
background-color: rgb(10, 0, 25);
}
.animatedTitle {
animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
margin: auto;
max-width: 75%;
/* outline: 1px white solid; */
}
hr {
border: 2px gray solid;
margin: 20px;
@ -94,101 +91,17 @@ p {
margin: 5px;
}
#card {
background-color: rgb(15, 5, 80);
padding: 15px;
border: 2px white solid;
margin: 20px auto;
width: 95%;
max-width: 800px;
z-index: 3;
position: relative;
}
.pfp {
border-radius: 15px;
border: darkgray 4px solid;
width: 60%;
aspect-ratio: 1/1;
transform: scale(0.9);
border-radius: 50%;
}
img {
width: 100%;
max-width: 135px;
transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
h2 {
font-size: 1.8rem;
}
.rainDrop {
position: fixed;
z-index: -2;
visibility: hidden;
width: 4px;
height: 120px;
background: rgba(0, 0, 150, 0.5);
}
.mainTitle {
font-size: 2.75rem;
color: rgb(215, 80, 255);
display: block;
padding-top: 5px;
line-height: 2.2rem;
}
.note {
color: gray;
font-size: 1rem;
}
@keyframes mainText {
0% {
transform: translateY(calc(50vh - 6rem)) scale(1.5);
opacity: 0;
height: 4rem;
}
50% {
opacity: 1;
height: 4rem;
transform: translateY(calc(50vh - 6rem)) scale(1.25);
}
100% {
transform: translateY(0) scale(1);
}
}
@keyframes fadeDelay {
0% {
opacity: 0;
}
66% {
opacity: 0;
transform: translateY(25vh)
}
100% {
opacity: 1;
transform: none;
}
}
@keyframes hideContent {
0% {
overflow-y: hidden;
overflow-x: hidden;
}
100% {
overflow-y: hidden;
overflow-x: hidden;
}
}

25
static/subpage.css Normal file
View file

@ -0,0 +1,25 @@
/*
This page applies to any page on the site EXCEPT
the main page. Please only make changes here if you
want to modify the CSS of ALL subpages.
*/
h1:nth-of-type(1) {
font-size: 2.5rem;
}
main {
animation: fadeUp 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
@keyframes fadeUp {
0% {
transform: translateY(50vw);
opacity: 0;
}
100% {
transform: none;
opacity: 1;
}
}