More CSS

pageUpdater.js

@@ -45,13 +45,6 @@ function makeStars() {
 }
 
 function converter(html) {
-    var highTable = Object.keys(highlightedWords)
-    for (let index = 0; index < highTable.length; index++) {
-        var term = highTable[index];
-        var replacement = `<span style="color: ${highlightedWords[term]}">${term}</span>`
-        html = html.replaceAll(term, replacement)
-    }
-
     html = html.replaceAll("{BG_EFFECT}", makeStars())
 
     html = html.replaceAll("{COMMIT_COUNT}", commitCount)
@@ -62,6 +55,13 @@ function converter(html) {
 
     html = html.replaceAll("{RANDOM_TITLE}", titles[Math.floor(Math.random() * titles.length)])
 
+    var highTable = Object.keys(highlightedWords)
+    for (let index = 0; index < highTable.length; index++) {
+        var term = highTable[index];
+        var replacement = `<span style="color: ${highlightedWords[term]}">${term}</span>`
+        html = html.replaceAll(term, replacement)
+    }
+
     return html
 }
 

static/index.html

@@ -26,26 +26,42 @@
             {COMMIT_COUNT}</span><br></h1>
     <main>
         <p>{RANDOM_QUOTE}</p>
-        <hr>
+            <div class="container-fluid row" id="card">
-        <p>Hi! I'm Violet, a 15 year old web and game developer. <br>
+                <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>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://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>
+                    <p class="chip"><a href="https://ko-fi.com/bingus_violet" style="color: rgb(255, 100, 100);">Donate</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 quote fluent in NodeJS.<br>
+                        becoming quite fluent in NodeJS.</p>
-            Although my site is pretty barebones at the moment due to a recent rewrite, I hope to continue with this
+                </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>
-
-        <div id="card">
-            <h2>Violet</h2>
-            <div class="sides">
-                <img src="https://api.violets-purgatory.dev/v1/pfp" class="pfp">
-            </div>
-            <div class="sides">
-                <p>
-                    They/Them<br>
-                    {RANDOM_TITLE}
-                </p>
-            </div>
-        </div>
         <p>As is probably very obvious, I'm not great at graphic design at the moment, but I hope to improve upon that
             as time goes on.<br><span class="note">I'm sure you can tell I have a pretty low self esteem too...</span>
         </p>

static/style.css

@@ -9,6 +9,7 @@
 * {
     font-family: 'Rubik', Verdana, Geneva, Tahoma, sans-serif;
     padding: 0;
+    margin: 0;
     font-weight: 400;
     text-align: center;
     color: white;
@@ -18,6 +19,13 @@ body {
     background-color: black;
     overflow-x: hidden;
 
+    background-color: rgb(15, 4, 45);
+    background: linear-gradient(rgb(20, 4, 55), black);
+
+    background-attachment: local;
+
+    min-height: 100vh;
+
     padding: 25px;
 
     animation: hideContent 2.5s;
@@ -31,6 +39,44 @@ main {
     margin: auto;
 }
 
+a {
+    color: rgb(175, 225, 255);
+    display: inline-block;
+    transition: 1.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.chip {
+    position: relative;
+    z-index: 3;
+    font-size: 1.3rem;
+    border: 2px gray solid;
+    border-radius: 6px;
+    background-color: black;
+    padding: 8px;
+    margin: 3px;
+    display: inline-block;
+    transform: scale(0.95);
+    transition: transform 1.25s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 2s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.chip,
+.chip>* {
+    text-decoration: none;
+}
+
+.chip:hover {
+    background-color: rgb(10, 0, 25);
+    transform: scale(1);
+    /* font-size: 1.35rem; */
+    border-color: white;
+    transition: transform 0.75s cubic-bezier(0.075, 0.82, 0.165, 1), background-color 3s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+.chip:hover > .smallimg {
+    background-color: rgb(10, 0, 25);
+}
+
+
 .animatedTitle {
     animation: mainText 3s cubic-bezier(0.075, 0.82, 0.165, 1);
     margin: auto;
@@ -45,33 +91,36 @@ hr {
 
 p {
     font-size: 1.25rem;
+    margin: 5px;
 }
 
 #card {
-    background-color: rgb(75, 0, 125);
+    background-color: rgb(15, 5, 80);
-    border: 2px lightgray solid;
+    padding: 15px;
-    border-radius: 15px;
+    border: 2px white solid;
-    max-width: 600px;
+    margin: 20px auto;
-    margin: auto;
+    width: 95%;
-}
+    max-width: 800px;
-
+    z-index: 3;
-div.sides {
+    position: relative;
-    display: inline-block;
-    width: max(20%, 175px);
-    padding: 0;
-    margin: auto;
-    vertical-align: middle;
 }
 
 .pfp {
-    width: 125px;
+    border-radius: 15px;
-    height: 125px;
+    border: darkgray 4px solid;
-    border: 2px white solid;
+    width: 60%;
+    aspect-ratio: 1/1;
+    transform: scale(0.9);
     border-radius: 50%;
-
-    margin: 25px;
 }
 
+img {
+    width: 100%;
+    max-width: 135px;
+    transition: all 2s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+
 h2 {
     font-size: 1.8rem;
 }