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