first commit! 🎉
This commit is contained in:
commit
c927d9490e
GPG key ID:
CF99829C92678188
10 changed files with 1229 additions and 0 deletions
BIN
public/img/favicon.png
Normal file
BIN
public/img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
153
public/index.html
Normal file
153
public/index.html
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en"><head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<title>ari melody 💫</title>
|
||||
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
|
||||
|
||||
<meta property="og:title" content="ari melody">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="www.arimelody.me">
|
||||
<meta property="og:image" content="https://www.arimelody.me/img/favicon.png">
|
||||
<meta property="og:site_name" content="ari melody">
|
||||
<meta property="og:description" content="home to your local SPACEGIRL 💫">
|
||||
|
||||
<link rel="stylesheet" href="style/main.css">
|
||||
|
||||
<script src="script/main.js" defer="defer"></script>
|
||||
<link rel="me" href="https://wetdry.world/@ari">
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<div id="header">
|
||||
<img src="img/favicon.png" id="header-icon" width="100" height="100">
|
||||
<div id="header-text">
|
||||
<h1>ari melody</h1>
|
||||
<h2>your local SPACEGIRL 💫</h2>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/" target="_blank">home</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://mellodoot.com/music" target="_blank">music</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/mellodoot/arimelody.me" target="_blank">source</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<a class="inactive" title="coming later!">blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<!-- coming later! -->
|
||||
<a class="inactive" title="coming later!">art</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h1>
|
||||
# hello, world!
|
||||
</h1>
|
||||
|
||||
<p>
|
||||
<strong>i'm ari!</strong>
|
||||
<br>
|
||||
<small>she/her 🏳️⚧️🏳️🌈💫🦆🇮🇪</small>
|
||||
</p>
|
||||
<p>
|
||||
creator of the infamous (but barely famous) <a href="https://catdance.xyz" target="_blank">catdance</a>, a lovely little <a href="https://github.com/mellodoot/prideflag" target="_blank">pride flag</a> for
|
||||
the
|
||||
web, other <a href="https://github.com/mellodoot?tab=repositories" target="_blank">silly
|
||||
code
|
||||
projects</a> and a whole slew of content across <a href="https://youtube.com/mellodoot" target="_blank">youtube</a> and all good <a href="https://mellodoot.com/music" target="_blank">music</a> streaming platforms!
|
||||
</p>
|
||||
<p>
|
||||
i play around with all aspects of creative media. i like making music, writing code,
|
||||
creating
|
||||
videos, drawing artwork...if it can be done on a computer, i've probably tried it!
|
||||
really a jack
|
||||
of all trades, mastery pending.
|
||||
</p>
|
||||
<p>
|
||||
if you're looking to support me financially, that's so cool of you!! if you like, you
|
||||
can buy
|
||||
one or more of my songs over on <a href="https://mellodoot.bandcamp.com" target="_blank">bandcamp</a>, so you can at least get something for your
|
||||
troubles. thank
|
||||
you very much either way!! 💕
|
||||
</p>
|
||||
<p>
|
||||
for anything else, you can reach me for any and all communications through <a href="mailto:ari@arimelody.me">ari@arimelody.me</a>.
|
||||
</p>
|
||||
<p>
|
||||
thanks for stopping by, and i hope you have a lovely rest of your day!
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>
|
||||
## where to find me:
|
||||
</h2>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://youtube.com/@mellodoot" target="_blank">youtube</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://mellodoot.tumblr.com" target="_blank">tumblr</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://twitch.tv/mellodoot" target="_blank">twitch</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://sptfy.com/mellodoot" target="_blank">spotify</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://soundcloud.com/arimelody" target="_blank">soundcloud</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/mellodoot" target="_blank">github</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2>
|
||||
## projects i've worked on:
|
||||
</h2>
|
||||
<ul class="links">
|
||||
<li>
|
||||
<a href="https://catdance.xyz" target="_blank">catdance</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/mellodoot/sandblock" target="_blank">sandblock</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/mellodoot/prideflag" target="_blank">pride flag</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/mellodoot/ipaddrgen" target="_blank">ipaddrgen</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://impact.mellodoot.com/" target="_blank">impact meme</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
this site is intended to eventually replace
|
||||
<a href="https://mellodoot.com/" target="_blank">mellodoot.com</a>.
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<small><em>*made with ♥ by ari, 2023*</em></small>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
</footer>
|
||||
|
||||
<div id="overlay"></div>
|
||||
|
||||
</body></html>
|
||||
55
public/script/main.js
Normal file
55
public/script/main.js
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
document.addEventListener("DOMContentLoaded", () => {
|
||||
[...document.querySelectorAll("h1, h2, h3, h4, h5, h6")]
|
||||
.filter((e) => e.innerText != "")
|
||||
.forEach((e) => {
|
||||
type_out(e);
|
||||
});
|
||||
[...document.querySelectorAll("ol, ul")]
|
||||
.filter((e) => e.innerText != "")
|
||||
.forEach((e) => {
|
||||
fill_list(e);
|
||||
});
|
||||
});
|
||||
|
||||
function type_out(e) {
|
||||
const text = e.innerText;
|
||||
const original = e.innerHTML;
|
||||
e.innerText = "";
|
||||
const delay = 25;
|
||||
let chars = 0;
|
||||
|
||||
function insert_char(character, parent) {
|
||||
const c = document.createElement("span");
|
||||
c.innerText = character;
|
||||
parent.appendChild(c);
|
||||
c.classList.add("newchar");
|
||||
}
|
||||
|
||||
function normalize() {
|
||||
e.innerHTML = original;
|
||||
}
|
||||
|
||||
function increment_char() {
|
||||
const newchar = text.substring(chars - 1, chars);
|
||||
insert_char(newchar, e);
|
||||
chars++;
|
||||
if (chars <= text.length) {
|
||||
setTimeout(increment_char, delay);
|
||||
} else {
|
||||
setTimeout(normalize, 250);
|
||||
}
|
||||
}
|
||||
|
||||
increment_char();
|
||||
}
|
||||
|
||||
function fill_list(list) {
|
||||
const items = list.querySelectorAll("li a");
|
||||
items.innerText = "";
|
||||
const delay = 100;
|
||||
|
||||
items.forEach((item, iter) => {
|
||||
item.style.animationDelay = `${iter * delay}ms`;
|
||||
item.style.animationPlayState = "playing";
|
||||
});
|
||||
}
|
||||
288
public/style/main.css
Normal file
288
public/style/main.css
Normal file
|
|
@ -0,0 +1,288 @@
|
|||
:root {
|
||||
--primary: #b7fd49;
|
||||
--secondary: #f8e05b;
|
||||
--tertiary: #f788fe;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #111;
|
||||
color: #eee;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
text-shadow: 0 0 3em, 0 0 0.2em;
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 1px solid #888;
|
||||
}
|
||||
|
||||
#header {
|
||||
width: min(calc(100% - 4rem), 720px);
|
||||
height: 3em;
|
||||
margin: auto;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1em;
|
||||
padding: 0 1em;
|
||||
}
|
||||
|
||||
img#header-icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
margin: .5em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#header-text {
|
||||
width: 11em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#header-text h1 {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#header-text h2 {
|
||||
height: 1.2em;
|
||||
line-height: 1.2em;
|
||||
margin: 0;
|
||||
font-size: .8em;
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
header ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: .5em;
|
||||
/* overflow-x: scroll; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header ul li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
header ul li a {
|
||||
padding: .2em .5em;
|
||||
border: 1px solid #65b4fd;
|
||||
color: #65b4fd;
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
transition-property: color, border-color, background-color;
|
||||
transition-duration: .2s;
|
||||
animation: list-item-fadein .2s forwards;
|
||||
animation-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
header ul li a.inactive {
|
||||
color: #aaa;
|
||||
border-color: #aaa;
|
||||
cursor: default;
|
||||
text-decoration: none !important;
|
||||
}
|
||||
|
||||
header ul li a:not(.inactive):hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: #65b4fd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(calc(100% - 4rem), 720px);
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
main h1 {
|
||||
line-height: 3rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
main h2 {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
main h3 {
|
||||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #65b4fd;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 1em;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
span.newchar {
|
||||
animation: newchar 0.25s;
|
||||
}
|
||||
|
||||
@keyframes newchar {
|
||||
from {
|
||||
background: #fff8;
|
||||
}
|
||||
}
|
||||
|
||||
span.hide {
|
||||
display: none;
|
||||
}
|
||||
|
||||
h1:hover span.hide {
|
||||
display: initial;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
div#me_irl {
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
border: 2px solid white;
|
||||
}
|
||||
|
||||
div#me_irl img {
|
||||
display: block;https://discord.gg/PSyTZDt
|
||||
}
|
||||
|
||||
div#me_irl::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
transform: translate(2px, 2px);
|
||||
background-image: linear-gradient(to top right,
|
||||
var(--primary),
|
||||
var(--secondary));
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
small {
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
|
||||
main h1:hover,
|
||||
main h2:hover,
|
||||
main h3:hover,
|
||||
main h4:hover,
|
||||
main h5:hover,
|
||||
main h6:hover,
|
||||
main p:hover,
|
||||
main small:hover {
|
||||
background-color: #fff2;
|
||||
}
|
||||
|
||||
hr {
|
||||
text-align: center;
|
||||
line-height: 0px;
|
||||
border-width: 1px 0 0 0;
|
||||
border-color: #888f;
|
||||
margin: 1.5em 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
ul.links {
|
||||
display: flex;
|
||||
gap: 1em .5em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
ul.links li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul.links li a {
|
||||
padding: .2em .5em;
|
||||
border: 1px solid #65b4fd;
|
||||
color: #65b4fd;
|
||||
border-radius: 2px;
|
||||
background-color: transparent;
|
||||
transition-property: color, border-color, background-color;
|
||||
transition-duration: .2s;
|
||||
animation: list-item-fadein .2s forwards;
|
||||
animation-delay: 0s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ul.links li a:hover {
|
||||
color: #eee;
|
||||
border-color: #eee;
|
||||
background-color: #65b4fd;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 0 1em #65b4fd;
|
||||
}
|
||||
|
||||
@keyframes list-item-fadein {
|
||||
from {
|
||||
opacity: 1;
|
||||
background: #fff8;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
footer {
|
||||
margin: 2rem;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
@keyframes overlay-flicker {
|
||||
from {
|
||||
opacity: .5;
|
||||
}
|
||||
to {
|
||||
opacity: .6;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes overlay-scroll {
|
||||
from {
|
||||
background-position-y: 0;
|
||||
}
|
||||
to {
|
||||
background-position-y: .2em;
|
||||
}
|
||||
}
|
||||
|
||||
#overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-image: linear-gradient(180deg, rgba(0,0,0,0) 15%, rgb(0, 0, 0) 40%, rgb(0, 0, 0) 60%, rgba(0,0,0,0) 85%);
|
||||
background-size: 100vw .2em;
|
||||
background-repeat: repeat;
|
||||
opacity: .5;
|
||||
pointer-events: none;
|
||||
animation: linear .05s infinite alternate overlay-flicker;
|
||||
mix-blend-mode: overlay;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
#header-text {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in a new issue