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