major update
This commit is contained in:
parent
05961e2a3c
commit
392e788d91
228
index.html
228
index.html
@ -3,51 +3,72 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Alfieking.dev</title>
|
<title>Alfie's basement</title>
|
||||||
<link rel="icon" href="/static/content/icon.webp">
|
<link rel="icon" href="/static/content/icon.webp">
|
||||||
<link rel="stylesheet" href="/static/css/main.css">
|
<link rel="stylesheet" href="/static/css/index.css">
|
||||||
<meta name="description" content="Alfie King's personal website.">
|
<meta name="description" content="Alfie's basement">
|
||||||
<meta name="keywords" content="Alfie King, Alfie, King, Alfieking, Alfieking.dev">
|
<meta name="keywords" content="Alfie King, Alfie, King, Alfieking, Alfieking.dev, dev, server">
|
||||||
<meta name="author" content="Alfie King">
|
<meta name="author" content="Alfie King">
|
||||||
<meta name="robots" content="all">
|
<meta name="robots" content="all">
|
||||||
|
|
||||||
<meta name="theme-color" content="#63de90">
|
<meta name="theme-color" content="#63de90">
|
||||||
<meta property="og:site_name" content="Alfieking.dev">
|
<meta property="og:site_name" content="Alfieking.dev">
|
||||||
<meta property="og:url" content="https://alfieking.dev">
|
<meta property="og:url" content="https://alfieking.dev">
|
||||||
<meta property="og:title" content="Alfie King">
|
<meta property="og:title" content="Alfie's basement">
|
||||||
<meta property="og:description" content="server backend survivor">
|
<meta property="og:description" content="server backend survivor">
|
||||||
<meta property="og:type" content="website">
|
<meta property="og:type" content="website">
|
||||||
<meta name="og:image" itemprop="image" content="static/content/icon.webp">
|
<meta property="og:image" content="static/content/icon.webp">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<div id="furry"></div>
|
||||||
<ul>
|
<div id="sidebar">
|
||||||
<li><a href="#home"><img src="/static/content/icon.webp"></a></li>
|
<nav>
|
||||||
<li><a href="#about">About</a></li>
|
<section>
|
||||||
<li><a href="#projects">Projects</a></li>
|
<h1>Things to see :3</h1>
|
||||||
<li><a href="#links">Links</a></li>
|
<ul>
|
||||||
<li id="music">
|
<li><a href="#Home" onclick="alert('ur already here :3')">Home</a></li>
|
||||||
<img id="music-icon" src="" alt="">
|
<li><a href="https://git.alfieking.dev/acetheking987">Gitea</a></li>
|
||||||
<div id="music-expand">
|
<li><a href="https://www.last.fm/user/acetheking987">LastFm</a></li>
|
||||||
<h1 id="music-title"></h1>
|
<li><a href="https://steamcommunity.com/id/acetheking987/">Steam</a></li>
|
||||||
<h2 id="music-info"></h2>
|
<li><a href="https://www.youtube.com/@acetheking987">YouTube</a></li>
|
||||||
<div id="music-progress"></div>
|
<li><a href="https://acetheking987.tumblr.com/">Tumblr</a></li>
|
||||||
</div>
|
<li><a href="https://www.reddit.com/user/acetheking987">Reddit</a></li>
|
||||||
</li>
|
</ul>
|
||||||
</ul>
|
</section>
|
||||||
</nav>
|
</nav>
|
||||||
<main>
|
<section>
|
||||||
|
<h6>heya, this is 101% totally not a here for no reason</h6>
|
||||||
|
</section>
|
||||||
|
<section id="buttons">
|
||||||
|
<h1>BUTTONS</h1>
|
||||||
|
<ul>
|
||||||
|
<li><a href="https://dimden.dev/"><img src="https://dimden.dev/services/images/88x31.gif" alt="dimden"></a></li>
|
||||||
|
<li><a href="https://ne0nbandit.neocities.org/"><img src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png" alt="ne0nbandit"></a></li>
|
||||||
|
<li><a href="https://thinliquid.dev"><img src="https://thinliquid.dev/thnlqd.png" alt="thinliquid"></a></li>
|
||||||
|
<li><a href="https://nekoweb.org/"><img src="https://nekoweb.org/assets/buttons/button6.gif" alt="nekoweb"></a><!-- button by s1nez.nekoweb.org --></li>
|
||||||
|
<li><a href="https://s1nez.nekoweb.org/"><img src="https://s1nez.nekoweb.org/BUTTON.gif" alt="s1nez"></a></li>
|
||||||
|
<li><a href="https://beeps.website"><img src="https://beeps.website/assets/images/88x31-d.gif" alt="beeps"></a></li>
|
||||||
|
<li><a href="https://sparky.wagging.dev"><img src="https://sparky.wagging.dev/sparkybutton.png" alt="sparkythedogo"></a></li>
|
||||||
|
<li><a href="https://itsnotstupid.com"><img src="https://itsnotstupid.com/pics/button1.gif" alt="itsnotstupid"></a></li>
|
||||||
|
<li><a href='https://blinkies.cafe'><img src='https://blinkies.cafe/b/display/blinkiesCafe-badge.gif' alt='blinkies.cafe | make your own blinkies!'></a></li>
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<pre class="vsmoltext"> |\ _,,,---,,_<br>ZZZzz /,`.-'`' -. ;-;;,_<br> |,4- ) )-,_. ,\ ( `'-'<br> '---''(_/--' `-'\_)</pre>
|
||||||
|
</section>
|
||||||
|
<img src="static/content/haj.gif" alt="haj" class="haj">
|
||||||
|
</div>
|
||||||
|
<main id="main">
|
||||||
<header id="home">
|
<header id="home">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<img src="/static/content/icon.webp">
|
<img src="/static/content/icon.webp">
|
||||||
<div class="column">
|
<div>
|
||||||
<h1>Alfie King</h1>
|
<h1>Alfie King</h1>
|
||||||
<h2 id="typing">server backend survivor</h2>
|
<h2 id="typing">server backend survivor</h2>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
<section id="about">
|
<section>
|
||||||
<h1>About</h1>
|
<h1>A lil bit abt me</h1>
|
||||||
<p>
|
<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
|
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
|
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
|
||||||
@ -55,9 +76,6 @@
|
|||||||
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
|
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).
|
a pain).
|
||||||
<br><br>
|
<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
|
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
|
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.
|
interesting. But im at a lack of ideas at the moment.
|
||||||
@ -65,128 +83,46 @@
|
|||||||
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
|
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
|
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.
|
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>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<section id="projects">
|
<section class="blinkies">
|
||||||
<h1>Projects</h1>
|
<img src="https://adriansblinkiecollection.neocities.org/x45.gif" alt="">
|
||||||
<div class="projects">
|
<img src="https://adriansblinkiecollection.neocities.org/t3.gif" alt="">
|
||||||
<div class="project">
|
<img src="https://adriansblinkiecollection.neocities.org/k25.gif" alt="">
|
||||||
<img src="static/content/game_project.webp" alt="">
|
<img src="https://s1nez.nekoweb.org/img/52475686_BP77MK3UdnLmIQk.gif" alt="">
|
||||||
<div class="project-info">
|
<img src="https://s1nez.nekoweb.org/img/hc/hc%20(79).gif" alt="">
|
||||||
<h2>Game without a name</h2>
|
<img src="https://dewside.neocities.org/blinkies/bisigns.gif" alt="">
|
||||||
<p>
|
<img src="https://s1nez.nekoweb.org/g/ggg/gg%20(32).gif" alt="">
|
||||||
This is a game that I made in c++ using sdl. It is a simple platformer at the moment and will probably
|
<img src="https://s1nez.nekoweb.org/img/7dcd20d4.gif" alt="">
|
||||||
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>
|
||||||
<section id="links">
|
<section class="rowsect">
|
||||||
<h1>Links</h1>
|
<a href="" id="spotify-link">
|
||||||
<div class="links">
|
<div id="spotify">
|
||||||
<a href="https://neocities.org/">
|
<h1 id="spotify-title"></h1>
|
||||||
<img src="static/content/neocities-Logo.webp" alt="neocities">
|
<h2 id="spotify-artist"></h2>
|
||||||
</a>
|
<h2 id="spotify-album"></h2>
|
||||||
<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>
|
</div>
|
||||||
<a href="https://blinkies.cafe/">
|
</a>
|
||||||
<img src="static/content/blinikes-cafe.webp" alt="blinkies cafe">
|
<div class="stamps">
|
||||||
</a>
|
<img src="https://s1nez.nekoweb.org/img/other/ba4ba47a.png" alt="">
|
||||||
<a href="https://12ft.io/">
|
<img src="https://s1nez.nekoweb.org/img/fa02abd7.png" alt="">
|
||||||
<img src="static/content/12ft-ladder.webp" alt="12ft.io">
|
<img src="https://s1nez.nekoweb.org/img/hc/hc%20(172).gif" alt="">
|
||||||
</a>
|
<img src="https://gligar.neocities.org/furret2.png" alt="">
|
||||||
<a href="https://www.badinternetbills.com/">
|
<img src="https://gligar.neocities.org/ralsei2.png" alt="">
|
||||||
<img src="static/content/bad_internet_bills.webp" alt="badinternetbills">
|
<img src="https://gligar.neocities.org/tism.png" alt="">
|
||||||
</a>
|
<img src="https://64.media.tumblr.com/11957593416710af9ff049ff6ae7ab63/tumblr_pbb7cd42Ln1xz2nuuo4_100.gif" alt="">
|
||||||
<a href="https://aur.archlinux.org/packages?K=acetheking987&SeB=m">
|
<img src="https://dewside.neocities.org/stamps/dogofwisdom.gif" alt="">
|
||||||
<img src="static/content/Arch-linux-logo.webp" alt="aur">
|
<img src="https://dewside.neocities.org/stamps/kazookid.gif" alt="">
|
||||||
</a>
|
<img src="https://64.media.tumblr.com/3085aeace24ca0c5ddf08aac37cc3ab4/45a30eb92e06a85c-3a/s100x200/b7bfb2e91adbc310f712f4492e668298bd0779de.gif" alt="">
|
||||||
<div class="blinkies">
|
<img src="https://s1nez.nekoweb.org/img/hc/hc%20(27).png" alt="">
|
||||||
<a href="https://ne0nbandit.neocities.org/">
|
<img src="https://s1nez.nekoweb.org/g/ggg/gg%20(13).gif" alt="">
|
||||||
<img class="btn" src="https://ne0nbandit.github.io/assets/img/btn/mine/nbbanner.png">
|
<img src="https://kopawz.neocities.org/stamphoard/stamps2/kriswhere.png" alt="">
|
||||||
</a>
|
<img src="https://adriansblinkiecollection.neocities.org/stamps/g5.gif" alt="">
|
||||||
<a href="https://dimden.dev/">
|
<img src="https://adriansblinkiecollection.neocities.org/stamps/e40.gif" alt="">
|
||||||
<img class="btn" src="https://dimden.dev/images/88x31.gif">
|
<img src="https://adriansblinkiecollection.neocities.org/stamps/e43.gif" alt="">
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<iframe width="120" height="120" style="border:none" src="https://dimden.neocities.org/navlink/" name="neolink"></iframe>
|
|
||||||
<div class="blinkies">
|
|
||||||
<a href="https://thinliquid.dev">
|
|
||||||
<img class="btn" src="https://thinliquid.dev/thnlqd.png" alt="thinliquid's button" />
|
|
||||||
</a>
|
|
||||||
<a href="https://nekoweb.org/">
|
|
||||||
<img class="btn" src="https://nekoweb.org/assets/buttons/button3.gif">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div class="blinkies">
|
|
||||||
<a href="https://beeps.website/">
|
|
||||||
<img class="btn" src="static/content/bleeps.gif" alt="bleeps website" />
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<h2>Buttons!!! :3</h2>
|
|
||||||
<div class="btns">
|
|
||||||
<img src="static/content/btns/archlinux.gif" alt="archlinux">
|
|
||||||
<img src="static/content/btns/discord.gif" alt="discord">
|
|
||||||
<img src="static/content/btns/firefoxget.gif" alt="firefox">
|
|
||||||
<img src="static/content/btns/handcoded.gif" alt="handcoded">
|
|
||||||
<img src="static/content/btns/use-discord.gif" alt="use discord">
|
|
||||||
<img src="static/content/btns/vscbutton.gif" alt="vscode">
|
|
||||||
<img src="static/content/btns/deltarune.png" alt="deltarune">
|
|
||||||
<img src="static/content/btns/no_web3.gif" alt="no web3">
|
|
||||||
<img src="static/content/btns/learn_html.gif" alt="learn html">
|
|
||||||
<img src="static/content/btns/ublock_origin_now.png" alt="ublock origin">
|
|
||||||
<img src="static/content/btns/anything_but_chrome.gif" alt="naythong but chrome">
|
|
||||||
<img src="static/content/btns/made_with_paws.png" alt="made with paws">
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
<script src="/static/js/index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
<script src="/static/js/typing.js"></script>
|
|
||||||
<script src="/static/js/music.js"></script>
|
|
||||||
<script src="/static/js/links.js"></script>
|
|
||||||
</html>
|
</html>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
BIN
static/content/background.png
Normal file
BIN
static/content/background.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 743 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 168 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 297 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 483 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
BIN
static/content/haj.gif
Normal file
BIN
static/content/haj.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 31 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB |
312
static/css/index.css
Normal file
312
static/css/index.css
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
:root {
|
||||||
|
--primary-color: #5cdd8b;
|
||||||
|
--text-color: #b1b8c0;
|
||||||
|
--background-color: #020205;
|
||||||
|
--secondary-background-color: #090914;
|
||||||
|
--font-size: 0.5cm;
|
||||||
|
--font-family: 'Roboto Mono', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--background-color);
|
||||||
|
background-image: url("https://blinkies.cafe/purple-stars-bg.gif");
|
||||||
|
color: var(--text-color);
|
||||||
|
font-size: var(--font-size);
|
||||||
|
font-family: var(--font-family);
|
||||||
|
margin: 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 7fr 1.3fr;
|
||||||
|
grid-template-rows: 1fr;
|
||||||
|
grid-template-areas: "main sidebar";
|
||||||
|
padding: 7% 25% 7% 25%;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar {
|
||||||
|
grid-area: sidebar;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar section {
|
||||||
|
backdrop-filter: blur(2px) brightness(0.6);
|
||||||
|
border: var(--secondary-background-color) 2px solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul li {
|
||||||
|
width: fit-content;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul li a {
|
||||||
|
color: var(--text-color);
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 100;
|
||||||
|
font-family: 'Impact', sans-serif;
|
||||||
|
transition: all 0.2s ease-in-out
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul li a:hover {
|
||||||
|
color: var(--primary-color);
|
||||||
|
font-weight: 900;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul li img {
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar ul li img:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar h6 {
|
||||||
|
font-weight: 100;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons h1 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
text-shadow: var(--text-color) 1px 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons ul {
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 5px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vsmoltext {
|
||||||
|
font-size: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
grid-area: main;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
backdrop-filter: blur(2px) brightness(0.6);
|
||||||
|
border: var(--secondary-background-color) 2px solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div.row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin: 0;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header div.column {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header img {
|
||||||
|
width: 9rem;
|
||||||
|
height: 9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h2 {
|
||||||
|
font-size: 1.75rem;
|
||||||
|
font-weight: 100;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
top: -1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section {
|
||||||
|
backdrop-filter: blur(2px) brightness(0.6);
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: var(--secondary-background-color) 2px solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section h1 {
|
||||||
|
font-size: 3rem;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section p {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
main section a {
|
||||||
|
color: var(--primary-color);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
#furry {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: 0.1;
|
||||||
|
background-image: url('/static/content/background.png');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 50% 0;
|
||||||
|
background-size: cover;
|
||||||
|
z-index: -1;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blinkies {
|
||||||
|
justify-content: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blinkies img {
|
||||||
|
width: 150px;
|
||||||
|
height: 20px;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blinkies img:hover {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blinkies img:nth-child(odd):hover {
|
||||||
|
transform: scale(1.1) rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
section.rowsect {
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: auto auto;
|
||||||
|
gap: 1rem;
|
||||||
|
backdrop-filter: none;
|
||||||
|
border: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
section.rowsect>div {
|
||||||
|
backdrop-filter: blur(2px) brightness(0.6);
|
||||||
|
border: var(--secondary-background-color) 2px solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stamps {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
padding: 10px;
|
||||||
|
gap: 5px;
|
||||||
|
justify-content: center;
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stamps img {
|
||||||
|
width: 99px;
|
||||||
|
height: 56px;
|
||||||
|
transition: all 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stamps img:hover {
|
||||||
|
transform: scale(1.1) rotate(5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stamps img:nth-child(odd):hover {
|
||||||
|
transform: scale(1.1) rotate(-5deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
#spotify {
|
||||||
|
background-image: none;
|
||||||
|
background-color: var(--secondary-background-color);
|
||||||
|
backdrop-filter: blur(2px) brightness(0.6);
|
||||||
|
border: var(--secondary-background-color) 2px solid;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 15px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
height: 300px;
|
||||||
|
width: 300px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spotify-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#spotify-artist {
|
||||||
|
color: white;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 900;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
mix-blend-mode: difference;
|
||||||
|
}
|
||||||
|
|
||||||
|
.haj {
|
||||||
|
width: 100%;
|
||||||
|
filter: drop-shadow(0 0 0.5rem rgb(88, 214, 245));
|
||||||
|
}
|
||||||
@ -1,318 +0,0 @@
|
|||||||
:root {
|
|
||||||
--primary-color: #5cdd8b;
|
|
||||||
--text-color: #b1b8c0;
|
|
||||||
--background-color: #090c10;
|
|
||||||
--secondary-background-color: #0d1117;
|
|
||||||
--font-size: 0.5cm;
|
|
||||||
--font-family: 'Roboto Mono', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
background-color: var(--background-color);
|
|
||||||
color: var(--text-color);
|
|
||||||
font-size: var(--font-size);
|
|
||||||
font-family: var(--font-family);
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
height: 100vh;
|
|
||||||
width: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
list-style-type: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li {
|
|
||||||
writing-mode: vertical-lr;
|
|
||||||
text-orientation: upright;
|
|
||||||
padding: 2rem 0rem 0rem 1.4rem;
|
|
||||||
width: fit-content;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a {
|
|
||||||
color: var(--text-color);
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: 100;
|
|
||||||
font-family: 'Impact', sans-serif;
|
|
||||||
transition: all 0.3s ease-in-out
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a img {
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a:hover {
|
|
||||||
color: var(--primary-color);
|
|
||||||
font-weight: 900;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li a:hover img {
|
|
||||||
border-radius: 35%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li#music {
|
|
||||||
z-index: 100;
|
|
||||||
margin-top: auto;
|
|
||||||
padding-bottom: 2rem;
|
|
||||||
display: none;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li#music img {
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li#music div#music-expand {
|
|
||||||
display: none;
|
|
||||||
width: 0rem;
|
|
||||||
height: 0rem;
|
|
||||||
border-radius: 0 500px 500px 0;
|
|
||||||
background-color: var(--secondary-background-color);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
box-sizing: border-box;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li#music h1 {
|
|
||||||
display: none;
|
|
||||||
font-size: 100%;
|
|
||||||
max-width: 90%;
|
|
||||||
writing-mode: horizontal-tb;
|
|
||||||
margin: 0.5rem 0 0 0.5rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li#music h2 {
|
|
||||||
display: none;
|
|
||||||
font-size: 1rem;
|
|
||||||
max-width: 90%;
|
|
||||||
writing-mode: horizontal-tb;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: 100;
|
|
||||||
margin: 0.5rem 0 0 0.5rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul li#music div#music-progress {
|
|
||||||
display: none;
|
|
||||||
width: 100%;
|
|
||||||
margin-top: auto;
|
|
||||||
height: 1rem;
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
transition: all 3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
overflow: scroll;
|
|
||||||
scrollbar-width: none;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
width: 100%;
|
|
||||||
height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
header div.row {
|
|
||||||
position: relative;
|
|
||||||
left: -3rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin: 0;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
header div.column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header img {
|
|
||||||
width: 13rem;
|
|
||||||
height: 13rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1 {
|
|
||||||
font-size: 5rem;
|
|
||||||
font-weight: 900;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header h2 {
|
|
||||||
font-size: 1.75rem;
|
|
||||||
font-weight: 100;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
top: -1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
main section {
|
|
||||||
width: 100%;
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
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.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links a:nth-child(even) img:hover {
|
|
||||||
transform: scale(1.1) rotate(5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.links a:nth-child(odd) img:hover {
|
|
||||||
transform: scale(1.1) rotate(-5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.links iframe {
|
|
||||||
height: 120px;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.links iframe:hover {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.blinkies {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blinkies a img {
|
|
||||||
height: 60px;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blinkies a {
|
|
||||||
height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img.btn {
|
|
||||||
height: 60px !important;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#links h2 {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btns {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btns img {
|
|
||||||
height: 40px;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btns img:hover:nth-child(even) {
|
|
||||||
transform: scale(1.3) rotate(5deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btns img:hover:nth-child(odd) {
|
|
||||||
transform: scale(1.3) rotate(-5deg);
|
|
||||||
}
|
|
||||||
@ -1,3 +1,5 @@
|
|||||||
|
// TYPERWRITER
|
||||||
|
|
||||||
const values = [
|
const values = [
|
||||||
"Web developer",
|
"Web developer",
|
||||||
"Pc games enjoyer",
|
"Pc games enjoyer",
|
||||||
@ -68,4 +70,35 @@ function typing() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
typing();
|
typing();
|
||||||
|
|
||||||
|
// HIDDEN STUFF (shh don't tell anyone >:3)
|
||||||
|
|
||||||
|
var last5Chars = "";
|
||||||
|
|
||||||
|
document.addEventListener('keydown', function(event) {
|
||||||
|
last5Chars += event.key;
|
||||||
|
if (last5Chars == "furry") {
|
||||||
|
console.log("owo, whats this?");
|
||||||
|
document.getElementById('furry').style.display = 'block';
|
||||||
|
}
|
||||||
|
while (last5Chars.length >= 5) {
|
||||||
|
last5Chars = last5Chars.slice(1);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Spotify API
|
||||||
|
|
||||||
|
function getSpotify() {
|
||||||
|
fetch('https://api.alfieking.dev/spotify/nowplaying/xz02oolstlvwxqu1pfcua9exz').then(response => {
|
||||||
|
return response.json();
|
||||||
|
}).then(data => {
|
||||||
|
document.getElementById('spotify').style.backgroundImage = "url(" + data.item.album.images[0].url + ")";
|
||||||
|
document.getElementById('spotify-title').innerHTML = data.item.name;
|
||||||
|
document.getElementById('spotify-artist').innerHTML = data.item.artists[0].name;
|
||||||
|
document.getElementById('spotify-link').href = data.item.external_urls.spotify;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
getSpotify();
|
||||||
|
setInterval(getSpotify, 15000);
|
||||||
@ -1,78 +0,0 @@
|
|||||||
var enableMusic = true;
|
|
||||||
|
|
||||||
document.getElementById('music').addEventListener('mouseover', function() { musicHover(); });
|
|
||||||
|
|
||||||
function musicHover() {
|
|
||||||
if (!enableMusic) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
let icon = document.getElementById('music-icon');
|
|
||||||
icon.style.width = '8rem';
|
|
||||||
icon.style.height = '8rem';
|
|
||||||
icon.style.borderRadius = '500px 0 0 500px';
|
|
||||||
let div = document.getElementById('music-expand');
|
|
||||||
div.style.display = 'flex';
|
|
||||||
div.style.width = '20rem';
|
|
||||||
div.style.height = '8rem';
|
|
||||||
let title = document.getElementById('music-title');
|
|
||||||
title.style.display = 'block';
|
|
||||||
let info = document.getElementById('music-info');
|
|
||||||
info.style.display = 'block';
|
|
||||||
let progress = document.getElementById('music-progress');
|
|
||||||
progress.style.display = 'block';
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById('music').addEventListener('mouseout', function() { musicOut(); });
|
|
||||||
|
|
||||||
function musicOut() {
|
|
||||||
let icon = document.getElementById('music-icon');
|
|
||||||
icon.style.width = '1.5rem';
|
|
||||||
icon.style.height = '1.5rem';
|
|
||||||
icon.style.borderRadius = '50%';
|
|
||||||
let div = document.getElementById('music-expand');
|
|
||||||
div.style = '';
|
|
||||||
let title = document.getElementById('music-title');
|
|
||||||
title.style.display = 'none';
|
|
||||||
let info = document.getElementById('music-info');
|
|
||||||
info.style.display = 'none';
|
|
||||||
let progress = document.getElementById('music-progress');
|
|
||||||
progress.style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function fetchData() {
|
|
||||||
// allow cors
|
|
||||||
let data = fetch('https://alfieking.dev/api/nowplaying')
|
|
||||||
.then(response => response.json()).then(data => { return data; })
|
|
||||||
.catch(error => { return null;});
|
|
||||||
return data;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateUi(data) {
|
|
||||||
enableMusic = true;
|
|
||||||
document.getElementById('music').style.display = 'flex';
|
|
||||||
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 + '%';
|
|
||||||
}
|
|
||||||
|
|
||||||
function hideUi() {
|
|
||||||
enableMusic = false;
|
|
||||||
document.getElementById('music').style.display = 'none';
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
fetchData().then(data => {
|
|
||||||
console.log(data);
|
|
||||||
if (data.item != null) {
|
|
||||||
updateUi(data);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
hideUi();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
update();
|
|
||||||
setInterval(update, 3000);
|
|
||||||
Loading…
x
Reference in New Issue
Block a user