alex/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shoot

Browse Source
This commit is contained in:
z / alex
2022-09-13 23:51:45 -04:00
parent 1bce36a912
commit 268a87d955
6 changed files with 0 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
-96
View File
@@ -1,96 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
<meta name="og:url" content="https://thatalex.dev" />
<meta name="og:description" content="welcome to my portfolio website! well.. kinda. it's being rewritten, so it's a little bland here right now.." />
<link rel="alternate" type="application/json+oembed" href="/static/oembed.json">
<title>alex</title>
</head>
<body>
<div id="container">
<span class="header animation">
<h1>hey hey! little bland 'round here, eh?</h1>
</span>
<span class="content animation">
<p>yeah, i know. i'm scared too.
<br />
well, i'm reworking this website, so it'll be pretty when i'm done at least?
</p>
</span>
<span class="content2 animation">
<p>uhhh, you're still here? well.. i don't know what you're doing here.</p>
</span>
<span class="content3 animation">
<p>okay seriously. what? can you like, leave?</p>
</span>
<span class="content4 animation">
<p>I ASKED CAN YOU LEAVE??????</p>
</span>
</div>
<script src="static/js/haha.js"></script>
</body>
</html>
<style>
body {
font-family: 'IBM Plex Sans', sans-serif;
background-color:black;
text-align:center;
transform:translateY(30vh);
}
p {
font-size:25px;
}
#container {
color:white;
}
.animation {
animation-name: fade1;
animation-fill-mode:forwards;
opacity:0;
animation-duration:3s;
}
.header {
animation-name: fade1;
}
.content {
animation-name: fade1;
animation-delay:5s;
}
.content2 {
animation-name: fade1;
animation-delay:60s;
}
.content3 {
animation-name: fade1;
animation-delay:120s;
}
.content4 {
animation-name: fade1;
animation-duration:3s;
animation-delay:180s;
}
@keyframes fade1 {
from { opacity: 0; }
to { opacity: 1; }
}
</style>
spotify.html
-52
View File
@@ -1,52 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap" rel="stylesheet">
<title>Spotify Widget</title>
</head>
<body>
<div id="container">
<div style="text-align:center;" class="image">
<img width="150" id="cover-img">
</div>
<div style="text-align:center;" id="content">
<p id="cover-text"></p>
</div>
</div>
<script src="https://cdn.socket.io/4.5.0/socket.io.min.js" integrity="sha384-7EyYLQZgWBi67fBtVxw60/OWl1kjsfrPFcaU0pp0nAh+i8FD068QogUvg85Ewy1k" crossorigin="anonymous"></script>
<script src="static/js/spotify_widget.js"></script>
</body>
</html>
<script>
const string = window.location.search;
const params = new URLSearchParams(string);
if (params.has('dark') && params.get('dark') == "true") {
console.log('[ws-iframe] received dark mode override');
document.body.style.backgroundColor = "black";
document.getElementById("content").style.color = "white";
} else if (params.has('light') && params.get("light") == "true") {
console.log('[ws-iframe] received light mode override');
document.body.style.backgroundColor = "white";
document.getElementById("content").style.color = "black";
} else {
console.log('[ws-iframe] no override, defaulting to dark');
document.body.style.backgroundColor = "black";
document.getElementById("content").style.color = 'white';
}
</script>
<style>
body {
font-family: 'Quicksand', sans-serif;
background-color:black;
}
</style>
static/js/haha.js
-3
View File
@@ -1,3 +0,0 @@
setTimeout(() => {
location.href="https://youareanidiot.cc"
}, 365000)
static/js/spotify_widget.js
-28
View File
@@ -1,28 +0,0 @@
const socket = io("https://api.zephmakes.tech")
// divs used
var div = document.getElementById("container");
var image = div.querySelector("#cover-img");
var text = div.querySelector("#cover-text");
var content = div.querySelector(".cover-text");
console.log("[ws-iframe] asked server to initiate connection..")
socket.emit("spotify_status", "listen");
socket.on("api_update", (song_data) => {
if (!song_data.position) {
image.src = "https://thatalex.dev/static/bad.png"
text.innerHTML = "Uh oh!<br>There isn't an active song.<br><span style='font-size:10px;'><i>Try again later.</i></span>"
} else {
image.src = song_data.cover
text.innerHTML = `${song_data.title} - ${song_data.album}<br>${song_data.artist}<br>${song_data.position}/${song_data.duration}`;
}
});
// on connect + error events
socket.on("connect", () => {
console.log('[ws-iframe] hello dear friend! connected successfully to backend, formatting page')
})
socket.on("error", (e) => {
console.log(e)
})
static/main.css
-90
View File
@@ -1,90 +0,0 @@
body {
font-family: 'Cairo', sans-serif;
font-size:30px;
background-color:black;
color:white;
}
a {
padding-left:25px;
}
i {
color:white;
}
input {
background-color:gray;
border-radius:15px;
color:rgb(226, 226, 226);
}
::placeholder {
color:white;
padding-left:5px;
}
#container {
/* margin: 0 auto; */
top:50%;
left:50%;
position:absolute;
transform: translate(-50%, -50%)
}
#textDiv {
display:inline-block;
animation: typingEffect 2s forwards;
width:0%;
border-width:1px;
overflow:hidden;
white-space:nowrap;
}
#box {
background-color:gray;
width:15px;
opacity:0%;
height:35px;
border: 1px solid gray;
animation-name: cursorBlink;
animation-duration:0.5s;
animation-iteration-count: infinite;
margin: -25;
z-index:1;
position:absolute;
transform: translate(-65%, 100%);
}
#extraInfo {
opacity:0;
overflow:hidden;
animation:fadeIn 1s forwards;
animation-delay:2s;
}
#contact {
display:none;
}
.contactFade {
display:block;
animation: fadeIn 1s forwards;
animation-play-state:paused;
}
@keyframes cursorBlink {
0% {opacity:0%;}
25% {opacity:50%;}
75% {opacity:0%;}
}
@keyframes typingEffect {
from {width:0%;}
to {width:22%;}
}
@keyframes fadeIn {
from {opacity:0;}
to {opacity:1;}
}
static/oembed.json
-7
View File
@@ -1,7 +0,0 @@
{
"version": "1.0",
"type": "link",
"title": "thatalex.dev",
"author_name": "Alex",
"author_url": "https://twitter.com/zstreamss"
}