From 286ca9cd8f8db588630437ba3f7e1883f37de63c Mon Sep 17 00:00:00 2001 From: Ashhhleyyy Date: Tue, 20 Dec 2022 13:30:02 +0000 Subject: [PATCH] feat: initial commit --- .envrc | 1 + .gitignore | 2 + assets/parallax.js | 10 +++ assets/style.css | 196 +++++++++++++++++++++++++++++++++++++++++++++ flake.lock | 43 ++++++++++ flake.nix | 28 +++++++ index.html | 81 +++++++++++++++++++ 7 files changed, 361 insertions(+) create mode 100644 .envrc create mode 100644 .gitignore create mode 100644 assets/parallax.js create mode 100644 assets/style.css create mode 100644 flake.lock create mode 100644 flake.nix create mode 100644 index.html diff --git a/.envrc b/.envrc new file mode 100644 index 0000000..8392d15 --- /dev/null +++ b/.envrc @@ -0,0 +1 @@ +use flake \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..b91777e --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +/.direnv +/result diff --git a/assets/parallax.js b/assets/parallax.js new file mode 100644 index 0000000..b14d2e6 --- /dev/null +++ b/assets/parallax.js @@ -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"; + }) +})(); diff --git a/assets/style.css b/assets/style.css new file mode 100644 index 0000000..9041669 --- /dev/null +++ b/assets/style.css @@ -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; +} diff --git a/flake.lock b/flake.lock new file mode 100644 index 0000000..902a7ca --- /dev/null +++ b/flake.lock @@ -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 +} diff --git a/flake.nix b/flake.nix new file mode 100644 index 0000000..d54d027 --- /dev/null +++ b/flake.nix @@ -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/ + ''; + }; + } + ); +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..7a3fffe --- /dev/null +++ b/index.html @@ -0,0 +1,81 @@ + + + + + + + + + + + + + Ashhhleyyy + + + + +
+
+
+ + + + + + + + + + + + + + + + + + +
+ +
+ My avatar: a pale purple haired girl with blue eyes and large round glasses +
+ +
+ + + + + + + + + + + + + + + +
+
+

+ + Ashhhleyyy + +

+

+ + she/they + +

+
+ + + +