z0x/z0x.ca
Code Actions

first commit

Browse source
This commit is contained in:
z0x 2024-07-15 20:10:38 -04:00
commit 1c7877b6b1
12 changed files with 256 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
404.html Normal file
View file

@ -0,0 +1,25 @@
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>404</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
<meta property="og:title" content="404" />
<meta property="og:description" content="z0x's homepage" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="404" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="icon" type="image/x-icon" href="./img/favicon-256x256.webp" />
<link rel="icon" type="image/png" sizes="192x192" href="./img/favicon-192x192.webp">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="./img/favicon-180x180.webp">
<meta name="darkreader-lock">
</head>
<body>
<div class="center">
<div class="box-404">
<h1 class="header-404">404</h1>
</div>
<div id="snowflake-container"></div>
<script src="./js/snowflakes.ts"></script>
</div>
</body>
</html>

120
css/style.css Normal file
View file

@ -0,0 +1,120 @@
html, body {
margin: 0;
overflow: hidden;
color: #fff;
background-color: #222222;
background-attachment: fixed;
background-size: cover;
background-image: url("../img/gradient.webp"); }
a[href] {
color: transparent; }
.center {
display: flex;
overflow: hidden;
justify-content: center;
align-items: center;
min-height: 100vh; }
.box {
background-color: #0b0b0b80;
aspect-ratio: 1 / 1;
padding: 20px;
border-radius: 15%;
border: 3px solid #fff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box-404 {
background-color: #0b0b0b80;
aspect-ratio: 1 / 1;
padding: 20px;
border-radius: 15%;
border: 3px solid #fff;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.75);
text-align: center;
display: flex;
align-items: center;
justify-content: center; }
.logo {
width: 65%;
align-self: center; }
.header {
font-size: 4vh;
margin-top: auto; }
.header-404 {
font-size: 6vh; }
.unselectable {
-webkit-user-select: none;
user-select: none; }
@media (max-width: 768px) {
.box {
width: 70%;
}
.box-404 {
width: 40%;
}
}
@media (min-width: 768px) {
.box {
width: 15%;
}
.box-404 {
width: 10%;
}
}
@keyframes fadeIn {
0% {
opacity: 0; }
100% {
opacity: 1; } }
.box {
animation: fadeIn 2s;
animation-fill-mode: forwards; }
.logo, .header {
opacity: 0;
animation: fadeIn 1.2s;
animation-fill-mode: forwards; }
.logo {
animation-delay: 1s; }
.header {
animation-delay: 1.35s; }
@keyframes snowfall {
0% {
transform: translateY(-10vh); }
100% {
transform: translateY(130vh); } }
.snowflake {
background: white;
border-radius: 50%;
position: fixed;
top: -5vh;
animation: snowfall infinite;
opacity: 0.1; }
@font-face {
font-family: 'SF-Regular';
src: url("../fonts/SF-Pro-Display-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
font-display: swap; }
h1, h2, h3, h4, h5, h6, summary, select, button, p {
font-family: 'SF-Regular', system-ui; }

BIN
fonts/SF-Pro-Display-Regular.woff2 Normal file
View file

Binary file not shown.

BIN
img/favicon-180x180.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
img/favicon-192x192.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
img/favicon-256x256.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

BIN
img/gradient.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 339 KiB

BIN
img/logo.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

8
img/matrix.svg Normal file
View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-brand-matrix" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<path d="M4 3h-1v18h1" />
<path d="M20 21h1v-18h-1" />
<path d="M7 9v6" />
<path d="M12 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
<path d="M17 15v-3.5a2.5 2.5 0 1 0 -5 0v.5" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 469 B

37
index.html Normal file
View file

@ -0,0 +1,37 @@
<html lang="en-us">
<head>
<meta charset="utf-8" />
<title>z0x</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta property="og:title" content="z0x" />
<meta property="og:description" content="z0x's homepage" />
<meta property="og:url" content="https://z0x.ca" />
<meta property="og:type" content="website" />
<meta property="og:image" content="./img/favicon-256x256.webp" />
<meta property="og:image:alt" content="logo" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:site_name" content="z0x.ca" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="preload" href="./img/matrix.svg" as="image" />
<link rel="preload" href="./img/favicon-256x256.webp" as="image" />
<link rel="icon" type="image/x-icon" href="./img/favicon-256x256.webp" />
<link rel="icon" type="image/png" sizes="192x192" href="./img/favicon-192x192.webp">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="./img/favicon-180x180.webp">
<meta name="darkreader-lock">
</head>
<body>
<div class="center">
<div class="box">
<a>
<img class="logo" src="./img/favicon-256x256.webp" alt="logo" />
</a>
<h1 class="header unselectable">z0x</h1>
<div id="snowflake-container"></div>
<script src="./js/snowflakes.ts"></script>
</div>
</body>
</html>

30
js/snowflakes.ts Normal file
View file

@ -0,0 +1,30 @@
function createSnowflakes() {
const numSnowflakes = 50;
const maxSize = 0.2;
const maxTranslate = 10;
const container = document.getElementById('snowflake-container');
function randomBetween(min, max) {
return (Math.random() * max) + min;
}
if (container) {
for (let i = 0; i < numSnowflakes; i++) {
let randomSize = randomBetween(5, 25) + "px";
let randomLeft = randomBetween(0, window.innerWidth) + "px";
let randomDuration = randomBetween(3, 10);
const snowflake = document.createElement('div');
snowflake.classList.add('snowflake');
snowflake.style.width = randomSize;
snowflake.style.height = randomSize;
snowflake.style.left = randomLeft;
snowflake.style.animationDuration = randomDuration + "s";
snowflake.style.animationDelay = randomBetween(0, 5) + "s";
container.appendChild(snowflake);
}
}
}
createSnowflakes();

36
robots.txt Normal file
View file

@ -0,0 +1,36 @@
User-agent: *
Disallow:
User-agent: AdsBot-Google
User-agent: Amazonbot
User-agent: anthropic-ai
User-agent: Applebot-Extended
User-agent: AwarioRssBot
User-agent: AwarioSmartBot
User-agent: Bytespider
User-agent: CCBot
User-agent: ChatGPT-User
User-agent: Claude-Web
User-agent: ClaudeBot
User-agent: cohere-ai
User-agent: DataForSeoBot
User-agent: Diffbot
User-agent: FacebookBot
User-agent: FriendlyCrawler
User-agent: Google-Extended
User-agent: GoogleOther
User-agent: GPTBot
User-agent: img2dataset
User-agent: ImagesiftBot
User-agent: magpie-crawler
User-agent: Meltwater
User-agent: omgili
User-agent: omgilibot
User-agent: peer39_crawler
User-agent: peer39_crawler/1.0
User-agent: PerplexityBot
User-agent: PiplBot
User-agent: scoop.it
User-agent: Seekr
User-agent: YouBot
Disallow: /