init
This commit is contained in:
commit
3443cb8001
62
index.html
Normal file
62
index.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Alfieking.dev</title>
|
||||||
|
<link rel="icon" href="/static/content/icon.webp">
|
||||||
|
<link rel="stylesheet" href="/static/css/index.css">
|
||||||
|
<meta name="description" content="Alfie King's personal website.">
|
||||||
|
<meta name="keywords" content="Alfie King, Alfie, King, Alfieking, Alfieking.dev">
|
||||||
|
<meta name="author" content="Alfie King">
|
||||||
|
<meta name="robots" content="all">
|
||||||
|
|
||||||
|
<meta name="theme-color" content="#63de90">
|
||||||
|
<meta property="og:site_name" content="Alfieking.dev">
|
||||||
|
<meta property="og:url" content="https://alfieking.dev">
|
||||||
|
<meta property="og:title" content="Alfie King">
|
||||||
|
<meta property="og:description" content="server backend survivor">
|
||||||
|
<meta property="og:type" content="website">
|
||||||
|
<meta name="og:image" itemprop="image" content="static/content/icon.webp">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<ul>
|
||||||
|
<li><a href="#home"><img src="/static/content/icon.webp"></a></li>
|
||||||
|
<li><a href="#about">About</a></li>
|
||||||
|
<li><a href="#projects">Projects</a></li>
|
||||||
|
<li><a href="#links">Links</a></li>
|
||||||
|
<li id="music">
|
||||||
|
<img id="music-icon" src="" alt="">
|
||||||
|
<div id="music-expand">
|
||||||
|
<h1 id="music-title"></h1>
|
||||||
|
<h2 id="music-info"></h2>
|
||||||
|
<div id="music-progress"></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
<main>
|
||||||
|
<header id="home">
|
||||||
|
<div class="row">
|
||||||
|
<img src="/static/content/icon.webp">
|
||||||
|
<div class="column">
|
||||||
|
<h1>Alfie King</h1>
|
||||||
|
<h2 id="typing">server backend survivor</h2>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<section id="about">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="projects">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
<section id="links">
|
||||||
|
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
<script src="/static/js/typing.js"></script>
|
||||||
|
<script src="/static/js/music.js"></script>
|
||||||
|
</html>
|
||||||
BIN
static/content/icon.webp
Normal file
BIN
static/content/icon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
188
static/css/index.css
Normal file
188
static/css/index.css
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
:root {
|
||||||
|
--primary-color: #5cdd8b;
|
||||||
|
--text-color: #b1b8c0;
|
||||||
|
--background-color: #090c10;
|
||||||
|
--secondary-background-color: #0d1117;
|
||||||
|
--font-size: 0.5cm;
|
||||||
|
--font-family: 'Helvetica', 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 {
|
||||||
|
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 1s 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%;
|
||||||
|
height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
81
static/js/music.js
Normal file
81
static/js/music.js
Normal file
@ -0,0 +1,81 @@
|
|||||||
|
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() {
|
||||||
|
let data = fetch('https://alfieking.dev/api/v1/current_song')
|
||||||
|
.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.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-progress').style.width = progress + '%';
|
||||||
|
}
|
||||||
|
|
||||||
|
function hideUi() {
|
||||||
|
enableMusic = false;
|
||||||
|
document.getElementById('music').style.display = 'none';
|
||||||
|
}
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
fetchData().then(data => {
|
||||||
|
console.log(data);
|
||||||
|
if (data != null) {
|
||||||
|
if (data.idle) {
|
||||||
|
hideUi();
|
||||||
|
} else {
|
||||||
|
updateUi(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
hideUi();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
update();
|
||||||
|
setInterval(update, 10000);
|
||||||
42
static/js/typing.js
Normal file
42
static/js/typing.js
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
const values = ["Web developer", "Pc games enjoyer", "Server backend survivor", "python programmer", "Javascript disliker"];
|
||||||
|
var direction = 1;
|
||||||
|
var text = "";
|
||||||
|
var speed = 100;
|
||||||
|
var selectedValue = 0;
|
||||||
|
var currentValueIndex = 0;
|
||||||
|
|
||||||
|
function type() {
|
||||||
|
if (direction == 1) {
|
||||||
|
if (currentValueIndex < values[selectedValue].length) {
|
||||||
|
text += values[selectedValue][currentValueIndex];
|
||||||
|
currentValueIndex++;
|
||||||
|
} else {
|
||||||
|
direction = -1;
|
||||||
|
speed = 1500;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (currentValueIndex > 0) {
|
||||||
|
text = text.slice(0, -1);
|
||||||
|
currentValueIndex--;
|
||||||
|
} else {
|
||||||
|
direction = 1;
|
||||||
|
selectedValue++;
|
||||||
|
if (selectedValue >= values.length) {
|
||||||
|
selectedValue = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function typing() {
|
||||||
|
type();
|
||||||
|
document.getElementById("typing").innerHTML = "$ " + text;
|
||||||
|
if (direction == 1) {
|
||||||
|
speed = 80 + Math.random() * 100;
|
||||||
|
} else {
|
||||||
|
speed = 60 + (Math.random() * 100) / 2;
|
||||||
|
}
|
||||||
|
setTimeout(typing, speed);
|
||||||
|
}
|
||||||
|
|
||||||
|
typing();
|
||||||
Loading…
Reference in New Issue
Block a user