smth
This commit is contained in:
parent
2829c70325
commit
295707cca4
Binary file not shown.
After Width: | Height: | Size: 1.1 KiB |
File diff suppressed because one or more lines are too long
|
@ -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%;"><-</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>
|
|
@ -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%"><-</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>
|
|
@ -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>
|
|
@ -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>
|
|
@ -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%;"><-</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>
|
Loading…
Reference in New Issue