update

index.html

@@ -47,16 +47,112 @@
             </div>
         </header>
         <section id="about">
-
+            <h1>About</h1>
+            <p>
+                Im not good with writing so dont expect much here. I am a student who is learning c++ and python. I've Done a few projects that i think
+                are decent enough to show off, so I have put them on this website. I like to mess around with linux and have a few servers that I run. I've
+                been running a server for a few years now, and I have learned a lot from it. I have also switched to linux on my main computer, which has been
+                slightly annoying at times (mainly because one of my most played games' anticheat doesn't support on linux atm. Also, the lack of photoshop is
+                a pain).
+                <br><br>
+                I am also a fan of some 2000s internet culture, so I intend to "Eventualy" make a alternitive website that is a bit more like that. I have seen a
+                few sites that I like, such as <a href="https://ne0nbandit.neocities.org/">ne0nbandit street</a>. Neocities is a great place to find sites like that.
+                <br><br>
+                I would like to make some more projects in the future, but I am not sure what I want to make yet. I tend to make thing on impulse a lot, and motivation
+                is "lacking" at times. So the few ideas I do have may never come to fruition. I hope to get better at art so i could hopefully make a game that is somewhat
+                interesting. But im at a lack of ideas at the moment.
+                <br><br>
+                I would also like to have a functional blog on this site, but I bearly talk about much so I dont know what I would write about. I like to ramble on about
+                random things, but I dont think that would be very interesting to read, and I think that I would forget to update it. I have a tumblr that I have had for a few
+                years now, but I dont post on it (the social anxiety is too much for me :<). However I hope to get better at that in the future.
+                <br><br>
+                I will probably put this site on my git server at some point, but I dont know when that will be. I have a few other projects that I want to put on there, but
+                I have been lazy and havent done it yet (or maybe I have and just forgot to update this).
+                <br><br>
+                At this point i'm just trying to fill up space so that this site looks more interesting. I hope that I can make this site more interesting in the future, but
+                for now have this cat. :3
+                <br><br>
+                <pre>
+      |\      _,,,---,,_
+ZZZzz /,`.-'`'    -.  ;-;;,_
+     |,4-  ) )-,_. ,\ (  `'-'
+    '---''(_/--'  `-'\_)
+                </pre>
+            </p>
         </section>
         <section id="projects">
-
+            <h1>Projects</h1>
+            <div class="projects">
+                <div class="project">
+                    <img src="static/content/game_project.webp" alt="">
+                    <div class="project-info">
+                        <h2>Game without a name</h2>
+                        <p>
+                            This is a game that I made in c++ using sdl. It is a simple platformer at the moment and will probably 
+                            change in the future. It is supposed to be a school project, but I am mainly working on it to learn c++. 
+                            I hope to create a more interesting game in the future, but for now, this is what I have.
+                            <br><br>
+                            It is fully open source, but at the moment I havent got around to uploading it on my git server. However,
+                            it does require sdl to run, so you will need to install that if you want to run it.
+                            <br><br>
+                            I plan on making a better "engine" for it in the future, with more quality of life features and a functioning
+                            collision system. Currently, there i a very basic level editor that I made from recyling the code from the game.
+                        </p>
+                    </div>
+                </div>
+                <div class="project">
+                    <img src="static/content/term owo.png" alt="">
+                    <div class="project-info">
+                        <h2>Term owo</h2>
+                        <p>
+                            I made this project as a joke, I can't remember exactly what I baised it off other than the fact that it was somthing
+                            similar to this but in a different language. I originally made it in python, but I have since rewritten it in c++ so that
+                            it would be faster and so that I could learn c++.
+                            <br><br>
+                            It is mostly just a bunch of regex replacements, but I plan on adding more features in the future that add more ":3" and such to the
+                            output. It currently has a few features, such as reading and writing to files, and automatically putting the output to the clipboard.
+                        </p>
+                    </div>
+                </div>
+            </div>
         </section>
         <section id="links">
-
+            <h1>Links</h1>
+            <div class="links">
+                <a href="https://neocities.org/">
+                    <img src="static/content/neocities-Logo.webp" alt="neocities">
+                </a>
+                <a href="https://git.alfieking.dev">
+                    <img src="static/content/Gitea_Logo.webp" alt="gitea">
+                </a>
+                <div class="blinkies">
+                    <a href="https://acetheking987.tumblr.com/">
+                        <img src="/static/content/tumblr.gif" alt="tumblr">
+                    </a>
+                    <a href="https://www.twitch.tv/acetheking987">
+                        <img src="/static/content/twitch.gif" alt="twitch">
+                    </a>
+                </div>
+                <a href="https://blinkies.cafe/">
+                    <img src="static/content/blinikes-cafe.webp" alt="blinkies cafe">
+                </a>
+                <a href="https://12ft.io/">
+                    <img src="static/content/12ft-ladder.webp" alt="12ft.io">
+                </a>
+                <a href="https://www.badinternetbills.com/">
+                    <img src="static/content/bad_internet_bills.webp" alt="badinternetbills">
+                </a>
+                <a href="https://aur.archlinux.org/packages?K=acetheking987&SeB=m">
+                    <img src="static/content/Arch-linux-logo.webp" alt="aur">
+                </a>
+                <a href="https://ne0nbandit.neocities.org/">
+                    <img class="btn" src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png">
+                </a>
+            </div>
         </section>
     </main>
 </body>
 <script src="/static/js/typing.js"></script>
 <script src="/static/js/music.js"></script>
+<script src="/static/js/links.js"></script>
 </html>

static/css/index.css

@@ -4,7 +4,7 @@
     --background-color: #090c10;
     --secondary-background-color: #0d1117;
     --font-size: 0.5cm;
-    --font-family: 'Helvetica', sans-serif;
+    --font-family: 'Roboto Mono', sans-serif;
 }
 
 body {
@@ -118,7 +118,7 @@ nav ul li#music div#music-progress {
     margin-top: auto;
     height: 1rem;
     background-color: var(--primary-color);
-    transition: all 1s ease;
+    transition: all 3s ease;
 }
 
 main {
@@ -179,10 +179,97 @@ header h2 {
 
 main section {
     width: 100%;
-    height: 100vh;
+    min-height: 100vh;
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    align-items: center;
     box-sizing: border-box;
-}
+    padding: 4rem;
+}
+
+main section h1 {
+    font-size: 4.5rem;
+    font-weight: 900;
+    margin: 0;
+    padding: 0;
+}
+
+main section h2 {
+    font-size: 1.75rem;
+    margin: 0;
+    padding: 0;
+}
+
+main section p {
+    font-size: 1.25rem;
+    margin: 0;
+    padding: 0;
+    font-weight: 300;
+}
+
+main section a {
+    color: var(--primary-color);
+    text-decoration: none;
+    transition: all 0.3s ease-in-out;
+}
+
+main section a:hover {
+    text-decoration: underline;
+}
+
+.projects {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    margin-top: 2rem;
+    flex-wrap: wrap;
+}
+
+.project {
+    width: 30%;
+    display: flex;
+    flex-direction: column;
+}
+
+.project img {
+    width: 100%;
+    aspect-ratio: 5/2;
+    border-radius: 1rem 1rem 0 0;
+}
+
+.project .project-info {
+    padding: 0 1rem 1rem 1rem;
+    background-color: var(--secondary-background-color);
+    border-radius: 0 0 1rem 1rem;
+}
+
+.links {
+    display: flex;
+    flex-direction: row;
+    gap: 2rem;
+    margin-top: 2rem;
+    flex-wrap: wrap;
+}
+
+.links a img {
+    height: 120px;
+    transition: all 0.3s ease-in-out;
+}
+
+.links a img:hover {
+    transform: scale(1.1);
+}
+
+.blinkies {
+    display: flex;
+    flex-direction: column;
+}
+
+.blinkies a img {
+    height: 60px;
+    transition: all 0.3s ease-in-out;
+}
+
+img.btn {
+    height: 50px !important;
+    transition: all 0.3s ease-in-out;
+} 

static/js/music.js

@@ -40,7 +40,8 @@ function musicOut() {
 }
 
 function fetchData() {
-    let data = fetch('https://alfieking.dev/api/v1/current_song')
+    // allow cors
+    let data = fetch('https://alfieking.dev/api/nowplaying')
     .then(response => response.json()).then(data => { return data; }) 
     .catch(error => { return null;});
     return data;
@@ -49,10 +50,10 @@ function fetchData() {
 function updateUi(data) {
     enableMusic = true;
     document.getElementById('music').style.display = 'flex';
-    document.getElementById('music-icon').src = data.image;
-    document.getElementById('music-title').innerText = data.title;
-    document.getElementById('music-info').innerText = data.artist + ' - ' + data.album;
-    let progress = data.progress / data.length * 100;
+    document.getElementById('music-icon').src = data.item.album.images[0].url;
+    document.getElementById('music-title').innerText = data.item.name;
+    document.getElementById('music-info').innerText = data.item.artists[0].name + ' - ' + data.item.album.name;
+    let progress = data.progress_ms / data.item.duration_ms * 100;
     document.getElementById('music-progress').style.width = progress + '%';
 }
 
@@ -63,13 +64,8 @@ function hideUi() {
 
 function update() {
     fetchData().then(data => { 
-        console.log(data);
-        if (data != null) {
-            if (data.idle)  {
-                hideUi();
-            } else {
-                updateUi(data);
-            }
+        if (data.item != null) {
+            hideUi();
         }
         else {
             hideUi();
@@ -78,4 +74,4 @@ function update() {
 }
 
 update();
-setInterval(update, 10000);
+setInterval(update, 3000);