This commit is contained in:
tess 2023-09-02 00:19:50 +02:00
parent 2829c70325
commit 295707cca4
7 changed files with 1033 additions and 0 deletions

BIN
assets/alert.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

658
assets/lotte.gltf Normal file

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/stylesheet.css" />
<title>~other things i like~</title>
<meta
charset="UTF-8"
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<link rel="shortcut icon" type="image/png" href="/assets/favicon.png" />
</head>
<body style="padding-bottom: 700px">
<h1 class="title">
<a href="./" style="vertical-align:100%;">&lt;-</a>
<span style="vertical-align: 50%">these r</span> my
<span style="vertical-align: -50%" class="title-emphasis"
>other things i like</span
>
</h1>
<div class="box">
<p>
this is some other stuff i like! but idk what category to put them
in!!!<br />
so they go here!
</p>
</div>
<h2 class="box-title title">the stuff</h2>
<div class="box">
<ul>
<li>
<a
href="https://www.goodbyetohalos.com/"
class="link"
onmouseover="toggleText('halos')"
onmouseout="toggleText('halos')"
>goodbye to halos</a
>
<span id="halos" class="hide">(cool gay webcomic)</span>
</li>
<li>
this
<a
href="https://forum.videolan.org/viewtopic.php?t=132548"
class="link"
onmouseover="toggleText('vlc')"
onmouseout="toggleText('vlc')"
>forum post</a
>
<span class="hide" id="vlc"
>where someone is rly angry abt the vlc logo</span
>
</li>
</ul>
</div>
<script src="/assets/script.js"></script>
</body>
</html>

View File

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/stylesheet.css" />
<title>~shinx~</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="/assets/favicon.png" />
</head>
<body>
<h1 class="title">
<a href="./" style="vertical-align: 100%">&lt;-</a>
<span style="vertical-align: 50%">this is</span> my
<span style="vertical-align: -50%" class="title-emphasis">fav pokemon</span>
</h1>
<div class="box">
<p>
shinx is my favourite pokemon!! <br />throughout my childhood i cycled
through a lot of different fav pokemon but shinx was always among them
</p>
<p>
shinx is still the best pokemon to this day!!! u cant change my mind
just look at how cute he is hes great!!!!!
</p>
<p>and hes electric type big fan of those</p>
</div>
<h2 class="box-title title">my shinx plushie</h2>
<div class="box">
<p>
<a href="../lotte/gay" class="link">my girlfriend</a> got me a shinx
plushie fae is my world 🥺🥺🥺
</p>
</div>
<img class="box-image" src="/assets/shinx1.jpg" alt="me smiling and holding the shinx plushie" width="30%" />
<img class="box-image" src="/assets/shinx2.jpg" alt="me sticking my tongue out and holding the shinx plushie"
width="30%" />
<img class="box-image" src="/assets/shinx4.jpg" alt="me leaning my head on the shinx plushie while hugging it"
width="30%" />
<img class="box-image" src="/assets/shinx3.jpg"
alt="the shinx plushie standing in front of a laptop and looking towards the camera" width="90%" />
<script src="/assets/script.js"></script>
</body>
</html>

View File

@ -45,6 +45,99 @@
}
</script>
<script src="/assets/script.js"></script>
<script lang="js">
const lerp = (x, y, a) => x * (1 - a) + y * a;
const loader = new GLTFLoader();
const canvas = document.getElementById(`three-dee-canvas-${this.file}`);
const camera = new THREE.PerspectiveCamera(10);
const renderer = new THREE.WebGLRenderer({canvas: canvas ?? undefined});
const scene = new THREE.Scene();
const clock = new THREE.Clock();
const pressed = useMousePressed({target: canvas});
const mouseInElement = useMouseInElement(canvas);
// set up light
const rightLight = new THREE.PointLight(0xd1aaf0);
rightLight.position.set(5, 5, 5);
rightLight.intensity = 100;
scene.add(rightLight);
const leftLight = new THREE.PointLight(0xaaf0d1);
leftLight.position.set(-5, 0, 5);
leftLight.intensity = 150;
scene.add(leftLight);
function resizeCanvas() {
const width = canvas?.clientWidth;
const height = canvas?.clientHeight;
renderer.setSize(width, height, false);
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setPixelRatio(1 / (width / 200));
}
const model = await loader.loadAsync(this.file);
model.scene.traverse((child) => {
if (child.isMesh) {
child.material = new THREE.MeshToonMaterial({
map: child.map != undefined ? child.map : null,
color: child.material.color,
});
scene.add(model.scene);
}
})
model.scene.rotation.y = -1;
renderer.setPixelRatio(0.1);
renderer.setClearAlpha(0.0);
camera.position.z = 20;
renderer.outputColorSpace = THREE.SRGBColorSpace;
resizeCanvas();
const resizeObserver = new ResizeObserver(resizeCanvas);
resizeObserver.observe(canvas);
let rotationSpeed = 0.01;
// where the mouse was first held
let lastX = null;
function animate() {
if (lastX === null) {
lastX = mouseInElement.elementX.value;
}
if (!mouseInElement.isOutside.value && pressed.pressed.value) {
const towards = ((mouseInElement.elementX.value - lastX) * 10) / mouseInElement.elementWidth.value;
rotationSpeed = lerp(rotationSpeed, towards, 0.1);
lastX = mouseInElement.elementX.value;
} else {
lastX = null;
rotationSpeed = lerp(rotationSpeed, 0.01, 0.01);
}
model.scene.rotation.y += rotationSpeed;
model.scene.rotation.x = Math.sin(clock.getElapsedTime() + 1) / 3;
model.scene.rotation.z = Math.cos(clock.getElapsedTime()) / 2;
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
resizeCanvas();
animate();
},
};
</script>
</body>
</html>

View File

@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/stylesheet.css" />
<title>~lotte's website~</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" type="image/png" href="/assets/favicon.png" />
</head>
<body class="special-background" onload="randomizeTextOneEN('one', 'two')">
<h1 class="title">
<span class="title" style="font-size: 150%; vertical-align: 50%">hi,</span>
welcome to my
<span style="vertical-align: -50%" class="title-emphasis">website</span>
</h1>
<div class="box">
<p>
this is where i
<span class="link" id="one"><a href="made">share things i made</a></span>
and
<span class="link" id="two"><a href="lotte/gay">gush abt my girlfriend</a></span>!!
</p>
</div>
<h2 class="title box-title">take a look around:</h2>
<div class="list">
<ul>
<li>
<a href="lotte" class="link">whos lotte</a>
</li>
<li><a href="made" class="link">stuff i've made</a></li>
<li><a href="good" class="link">things i like</a></li>
</ul>
</div>
<script src="/assets/script.js"></script>
</body>
</html>

View File

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/assets/stylesheet.css">
<title>~lotte's cat~</title>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" type="image/png" href="/assets/favicon.png">
</head>
<body class="cat-boxes">
<h1 class="title">
<a href="./" style="vertical-align:100%;">&lt;-</a>
<span style="vertical-align:50%;">lotte's</span> cute <span style="vertical-align:-50%">cat</span>
</h1>
<div class=box>
<p>i have a cat named <a class="zelda">tiara</a>!! <br>
and i have a lot of pictures of her that i like to look at because i love her so much!</p>
</div>
<h2 class="box-title title">the pictures!</h2>
<img class=box src="https://i.imgur.com/u8WgUDI.jpeg" alt="tiara looking at the camera and doing a blep" width="30%">
<div class=box>
<h4><span class=date>2nd december 2017</span></h4>
<p class=indent>this is from when she was a tiny baby,, she gave me a tiny little blep,</p>
</div>
<img class=box src="/assets/tiarawiiu.jpg" alt="tiara resting her head on a wiiu gamepad" width="30%">
<div class=box>
<h4><span class=date>17th december 2017</span></h4>
<p class=indent>i wish i could rest my head on a wiiu gamepad. it looks nice</p>
</div>
<img class=box src="/assets/tiara20180313.jpg" alt="tiara laying on my desk" width="30%">
<div class=box>
<h4><span class=date>13th march 2018</span></h4>
<p class=indent>this used to be her favourite spot to lay down</p>
</div>
<img class=box src="/assets/tiara20180503.jpg" alt="tiara laying on my lap while i'm on my laptop" width="30%">
<div class=box>
<h4><span class=date>3rd may 2018</span></h4>
<p class=indent>cute sleepy cat,,</p>
</div>
<img class=box src="https://i.imgur.com/HeLmZD9.jpeg" alt="tiara laying on her back" width="30%">
<div class=box>
<h4><span class=date>26th may 2018</span></h4>
<p class=indent>idk what she's up to but i'm happy for her</p>
</div>
<img class=box src="https://i.imgur.com/p97Mq2b.jpeg" alt="tiara sleepy" width="30%">
<div class=box>
<h4><span class=date>17th july 2018</span></h4>
<p class=indent>tiara cute sleepy</p>
</div>
<img class=box src="https://i.imgur.com/6Pfn45u.jpeg" alt="tiara stretching to be really long" width="30%">
<div class=box>
<h4><span class=date>9th august 2018</span></h4>
<p class=indent>looongg girl,!!</p>
</div>
<img class=box src="https://i.imgur.com/JiyFqrw.jpeg" alt="tiara sleeping next to me" width="30%">
<div class=box>
<h4><span class=date>11th september 2018 (never forget)</span></h4>
<p class=indent>sleepie zzz~,,</p>
</div>
<img class=box src="https://i.imgur.com/lKXdMww.jpeg" alt="tiara sleeping on me" width="30%">
<div class=box>
<h4><span class=date>23rd october 2018</span></h4>
<p class=indent>my cat likes to rest on me</p>
</div>
<img class=box src="https://i.imgur.com/CwCeFiP.jpeg" alt="tiara sleeping outside" width="30%">
<div class=box>
<h4><span class=date>27th may 2019</span></h4>
<p class=indent>sleepy girl,,,</p>
</div>
<img class=box src="https://i.imgur.com/PcWUKI2.jpeg" alt="tiara with her eyes closed" width="30%">
<div class=box>
<h4><span class="date">17th december 2019</span></h4>
<p class=indent>this was my phone background for a while</p>
</div>
<img class=box src="/assets/tiara20201001.jpg" width="30%">
<div class=box>
<h4><span class="date">1st october 2020</span></h4>
<p class=indent>i love her so so so much,,,</p>
</div>
<img class=box src="/assets/tiara20201123.jpg" width="30%">
<div class=box>
<h4><span class=date>23rd november 2020</span></h4>
<p class=indent>idk why she made this face but i appreciate it</p>
</div>
<img class="box" src="/assets/tiara20201218.jpg" width="30%">
<div class=box>
<h4><span class=date>18th december 2020</span></h4>
<p class=indent>look at her!!! she's! so cute!!!! i love her!!!!!!</p>
</div>
<img class=box src="/assets/tiara20201230.jpg" width="30%">
<div class=box>
<h4><span class=date>30th december 2020</span></h4>
<p class=indent>aaaaa!!!</p>
</div>
<img class=box src="/assets/tiara20210220.jpg" width="30%">
<div class=box>
<h4><span class=date>20th february 2021</span></h4>
<p class=indent>ig its true what they say abt cats and keyboards</p>
</div>
<div class=box style="margin-bottom:1px;">
<img src="/assets/tiara20210607_2.jpg" alt="tiara laying on a couch outdoors next to me while it's raining">
<img class=indent src="/assets/tiara20210607.jpg" alt="tiara laying on a couch">
</div>
<div class=box>
<h4><span class="date">7th june 2021</span></h4>
<p class=indent>vibing in nice, rainy weather</p>
</div>
<a href=../ class="title box-title">go look at something else</a>
</body>
</html>