acetheking987/alfieking.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
Alfie King
2024-08-27 16:48:30 +01:00
commit 3443cb8001
5 changed files with 373 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
index.html Normal file
View 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

188
static/css/index.css Normal file
View 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
View 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
View 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();