feat: initial commit
This commit is contained in:
commit
286ca9cd8f
GPG key ID:
83B789081A0878FB
7 changed files with 361 additions and 0 deletions
1
.envrc
Normal file
1
.envrc
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
use flake
|
||||||
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
/.direnv
|
||||||
|
/result
|
||||||
10
assets/parallax.js
Normal file
10
assets/parallax.js
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
(function() {
|
||||||
|
var background = document.getElementById('background');
|
||||||
|
|
||||||
|
window.addEventListener('mousemove', function (event) {
|
||||||
|
var newX = (event.clientX / document.body.clientWidth * 2 - 1);
|
||||||
|
var newY = (event.clientY / document.body.clientHeight * 2 - 1);
|
||||||
|
background.style.top = -newY + "vh";
|
||||||
|
background.style.left = -newX + "vw";
|
||||||
|
})
|
||||||
|
})();
|
||||||
196
assets/style.css
Normal file
196
assets/style.css
Normal file
|
|
@ -0,0 +1,196 @@
|
||||||
|
:root {
|
||||||
|
--background: #13092b;
|
||||||
|
--background-transparent: #13092baa;
|
||||||
|
--background-2: #090f2b;
|
||||||
|
--foreground: #ddd;
|
||||||
|
--foreground-bright: #fff;
|
||||||
|
--foreground-dim: #aaa;
|
||||||
|
--error: orange;
|
||||||
|
--accent: #f9027a;
|
||||||
|
--accent-dim: hsl(331, 50%, 49%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Ubuntu', sans-serif;
|
||||||
|
color: var(--foreground);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-container {
|
||||||
|
z-index: -100;
|
||||||
|
position: absolute;
|
||||||
|
top: 0vh;
|
||||||
|
left: 0vw;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#background {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background {
|
||||||
|
position: relative;
|
||||||
|
top: -5vh;
|
||||||
|
left: -5vw;
|
||||||
|
width: 110vw;
|
||||||
|
height: 110vh;
|
||||||
|
background: url(https://ashhhleyyy.dev/assets-gen/background.svg);
|
||||||
|
background-size: 1024px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble {
|
||||||
|
width: 95vw;
|
||||||
|
height: 95vw;
|
||||||
|
max-width: 512px;
|
||||||
|
max-height: 512px;
|
||||||
|
display: grid;
|
||||||
|
place-content: center;
|
||||||
|
border-radius: 999999px;
|
||||||
|
border: 2px solid var(--accent);
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
padding: 16px;
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
border-radius: 999999px;
|
||||||
|
width: 30vw;
|
||||||
|
height: 30vw;
|
||||||
|
max-width: 196px;
|
||||||
|
max-height: 196px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons > * {
|
||||||
|
position: relative;
|
||||||
|
transition: color 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons > *:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons > :nth-child(2) {
|
||||||
|
margin-left: min(3.665vw, 26.5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons > :nth-child(3) {
|
||||||
|
margin: 0 min(7.33vw, 53px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons > :nth-child(4) {
|
||||||
|
margin-right: min(3.665vw, 26.5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-top {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-top > :nth-child(1) {
|
||||||
|
top: min(49px, 7.5vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-top > :nth-child(3) {
|
||||||
|
top: max(-24.5px, -3.75vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-top > :nth-child(5) {
|
||||||
|
top: min(49px, 7.5vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-bottom > :nth-child(1) {
|
||||||
|
top: max(-49px, -7.5vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-bottom > :nth-child(3) {
|
||||||
|
top: min(24.5px, 3.75vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icons-bottom > :nth-child(5) {
|
||||||
|
top: max(-49px, -7.5vw);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-accent:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-matrix:hover {
|
||||||
|
color: #0DBD8B;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-github:hover {
|
||||||
|
color: #24292f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-mastodon:hover {
|
||||||
|
color: #3c99dc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-reddit:hover {
|
||||||
|
color: #ff4500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-twitch:hover {
|
||||||
|
color: #6441a5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-gitea:hover {
|
||||||
|
color: #609926;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-modrinth:hover {
|
||||||
|
color: #00af5c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-nucleoid {
|
||||||
|
filter: saturate(0);
|
||||||
|
transition: filter 200ms ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hover-nucleoid:hover {
|
||||||
|
filter: saturate(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nucleoid {
|
||||||
|
width: 2.5em;
|
||||||
|
height: 2.5em;
|
||||||
|
}
|
||||||
43
flake.lock
Normal file
43
flake.lock
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
{
|
||||||
|
"nodes": {
|
||||||
|
"flake-utils": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1667395993,
|
||||||
|
"narHash": "sha256-nuEHfE/LcWyuSWnS8t12N1wc105Qtau+/OdUAjtQ0rA=",
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "flake-utils",
|
||||||
|
"rev": "5aed5285a952e0b949eb3ba02c12fa4fcfef535f",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "numtide",
|
||||||
|
"repo": "flake-utils",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"nixpkgs": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1671268780,
|
||||||
|
"narHash": "sha256-9Okbivo10bcXEGCtmAQNfJt1Zpk6B3tjkSQ2CIXmTCg=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "80c24eeb9ff46aa99617844d0c4168659e35175f",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"owner": "NixOS",
|
||||||
|
"ref": "nixpkgs-unstable",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"type": "github"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": {
|
||||||
|
"inputs": {
|
||||||
|
"flake-utils": "flake-utils",
|
||||||
|
"nixpkgs": "nixpkgs"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "root",
|
||||||
|
"version": 7
|
||||||
|
}
|
||||||
28
flake.nix
Normal file
28
flake.nix
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
{
|
||||||
|
inputs = {
|
||||||
|
nixpkgs.url = "github:NixOS/nixpkgs/nixpkgs-unstable";
|
||||||
|
flake-utils.url = "github:numtide/flake-utils";
|
||||||
|
};
|
||||||
|
|
||||||
|
outputs = { self, nixpkgs, flake-utils }:
|
||||||
|
flake-utils.lib.eachDefaultSystem(system:
|
||||||
|
let
|
||||||
|
pkgs = import nixpkgs {
|
||||||
|
inherit system;
|
||||||
|
};
|
||||||
|
inherit (pkgs) lib;
|
||||||
|
in
|
||||||
|
{
|
||||||
|
packages.default = pkgs.stdenv.mkDerivation rec {
|
||||||
|
name = "Caaard";
|
||||||
|
src = ./.;
|
||||||
|
phases = "installPhase";
|
||||||
|
installPhase = ''
|
||||||
|
mkdir -p $out/assets
|
||||||
|
cp $src/index.html $out/
|
||||||
|
cp $src/assets/* $out/assets/
|
||||||
|
'';
|
||||||
|
};
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
81
index.html
Normal file
81
index.html
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
<!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="icon" type="image/png" href="https://cdn.ashhhleyyy.dev/file/ashhhleyyy-assets/images/pfp.webp">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.bunny.net">
|
||||||
|
<link href="https://fonts.bunny.net/css?family=ubuntu:500,700" rel="stylesheet" />
|
||||||
|
<script src="https://kit.fontawesome.com/83fef44d5f.js" crossorigin="anonymous"></script>
|
||||||
|
<link rel="stylesheet" href="assets/style.css">
|
||||||
|
<title>Ashhhleyyy</title>
|
||||||
|
</head>
|
||||||
|
<body class="container">
|
||||||
|
<div class="background-container" aria-hidden="true">
|
||||||
|
<div id="background">
|
||||||
|
<div class="background"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<div class="bubble">
|
||||||
|
<div class="icons icons-top">
|
||||||
|
<a href="https://github.com/ashhhleyyy" class="hover-github" title="Github" target="_blank">
|
||||||
|
<i class="fa-brands fa-github fa-2xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://git.ashhhleyyy.dev/ash" class="hover-gitea" title="Personal Gitea" target="_blank">
|
||||||
|
<i class="fa-brands fa-git-alt fa-2xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://fedi.ashhhleyyy.dev/ash" class="hover-mastodon" title="The fediverse" target="_blank">
|
||||||
|
<i class="fa-brands fa-mastodon fa-2xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://modrinth.com/user/Ash" class="hover-modrinth" title="Modrinth" target="_blank">
|
||||||
|
<svg width="2rem" height="2rem" viewBox="0 0 512 514" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M503.16 323.56C514.55 281.47 515.32 235.91 503.2 190.76C466.57 54.2299 326.04 -26.8001 189.33 9.77991C83.8101 38.0199 11.3899 128.07 0.689941 230.47H43.99C54.29 147.33 113.74 74.7298 199.75 51.7098C306.05 23.2598 415.13 80.6699 453.17 181.38L411.03 192.65C391.64 145.8 352.57 111.45 306.3 96.8198L298.56 140.66C335.09 154.13 364.72 184.5 375.56 224.91C391.36 283.8 361.94 344.14 308.56 369.17L320.09 412.16C390.25 383.21 432.4 310.3 422.43 235.14L464.41 223.91C468.91 252.62 467.35 281.16 460.55 308.07L503.16 323.56Z" fill="var(--color-brand)"/>
|
||||||
|
<path fill="currentColor" d="M321.99 504.22C185.27 540.8 44.7501 459.77 8.11011 323.24C3.84011 307.31 1.17 291.33 0 275.46H43.27C44.36 287.37 46.4699 299.35 49.6799 311.29C53.0399 323.8 57.45 335.75 62.79 347.07L101.38 323.92C98.1299 316.42 95.39 308.6 93.21 300.47C69.17 210.87 122.41 118.77 212.13 94.7601C229.13 90.2101 246.23 88.4401 262.93 89.1501L255.19 133C244.73 133.05 234.11 134.42 223.53 137.25C157.31 154.98 118.01 222.95 135.75 289.09C136.85 293.16 138.13 297.13 139.59 300.99L188.94 271.38L174.07 231.95L220.67 184.08L279.57 171.39L296.62 192.38L269.47 219.88L245.79 227.33L228.87 244.72L237.16 267.79C237.16 267.79 253.95 285.63 253.98 285.64L277.7 279.33L294.58 260.79L331.44 249.12L342.42 273.82L304.39 320.45L240.66 340.63L212.08 308.81L162.26 338.7C187.8 367.78 226.2 383.93 266.01 380.56L277.54 423.55C218.13 431.41 160.1 406.82 124.05 361.64L85.6399 384.68C136.25 451.17 223.84 484.11 309.61 461.16C371.35 444.64 419.4 402.56 445.42 349.38L488.06 364.88C457.17 431.16 398.22 483.82 321.99 504.22Z" fill="var(--color-brand)"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://nucleoid.xyz" class="hover-nucleoid" title="NucleoidMC" target="_blank">
|
||||||
|
<img src="https://nucleoid.xyz/assets/images/nucleoid_icon.png" class="nucleoid">
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<header class="about">
|
||||||
|
<img alt="My avatar: a pale purple haired girl with blue eyes and large round glasses" class="avatar" src="https://cdn.ashhhleyyy.dev/file/ashhhleyyy-assets/images/pfp.png" width="196" height="196">
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="icons icons-bottom">
|
||||||
|
<a href="mailto:contact@ashhhleyyy.dev" class="hover-accent" title="Email" target="_blank">
|
||||||
|
<i class="fa-solid fa-envelope fa-xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://twitch.tv/ashhhleyyyb" class="hover-twitch" title="Twitch" target="_blank">
|
||||||
|
<i class="fa-brands fa-twitch fa-xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="https://matrix.to/#/@ashhhleyyy:the-apothecary.club" class="hover-matrix" title="Matrix" target="_blank">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 3H3v18h1m16 0h1V3h-1M7 9v6m5 0v-3.5a2.5 2.5 0 1 0-5 0v.5m10 3v-3.5a2.5 2.5 0 1 0-5 0v.5"></path></svg>
|
||||||
|
</a>
|
||||||
|
<a href="https://git.ashhhleyyy.dev/ash.gpg" class="hover-accent" title="Reddit" target="_blank">
|
||||||
|
<i class="fa-solid fa-key fa-xl"></i>
|
||||||
|
</a>
|
||||||
|
<a href="mailto:ash@ashhhleyyy.dev" class="hover-accent" title="Email (personal)" target="_blank">
|
||||||
|
<i class="fa-solid fa-envelope fa-xl"></i>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1>
|
||||||
|
<a href="https://ashhhleyyy.dev" target="_blank">
|
||||||
|
Ashhhleyyy
|
||||||
|
</a>
|
||||||
|
</h1>
|
||||||
|
<h2>
|
||||||
|
<a href="https://en.pronouns.page/@Ashhhleyyy" target="_blank">
|
||||||
|
she/they
|
||||||
|
</a>
|
||||||
|
</h2>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<script src="assets/parallax.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue