I found a single page solution that requires no JavaScript.

Code

<section class=character-profile-wrapper>
 <!-- these divs are targeted by links as a way of specifying which character is selected -->
<!-- selectors 1 to 4 are the corresponding characters, selector 0 is used to select no one at all -->
<div id=accordion-select-0 class=accordion-selector></div>
<div id=accordion-select-1 class=accordion-selector></div>
<div id=accordion-select-2 class=accordion-selector></div>
<div id=accordion-select-3 class=accordion-selector></div>
<div id=accordion-select-4 class=accordion-selector></div>

<section class=character-profile-accordion>
<article class=character-profile>
<a href=#accordion-select-1 ><img src="hap.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
happy face happy face happy face happy face happy face happy face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-2 ><img src="sad.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
sad face sad face sad face sad face sad face sad face sad face sad face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-3 ><img src="meh.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
meh face meh face meh face meh face meh face meh face meh face meh face
</section>
</article>

<article class=character-profile>
<a href=#accordion-select-4 ><img src="poker.png"></a>
<section class=character-profile-biography>
<a href=#accordion-select-0>close</a><br>
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
poker face poker face poker face poker face poker face poker face
</section>
</article>
</section>

<style>
/* selector divs are fixed to the page so that when they are targeted the page doesnt scroll */
.accordion-selector {
position: fixed;
}

.character-profile {
width: 100%;
height: 100%;
overflow: hidden;
}

.character-profile img {
height: 100%;
float: left;
padding: 10px;
}

/* row of 4 */
.character-profile-accordion {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 200px;
}

/* make a big space for the selected character */
#accordion-select-1:target ~ .character-profile-accordion, 
#accordion-select-2:target ~ .character-profile-accordion,
#accordion-select-3:target ~ .character-profile-accordion,
#accordion-select-4:target ~ .character-profile-accordion
{
grid-template-columns: 1000px 200px;
grid-template-rows: 200px 200px 200px;
}

/* place targeted character in the big space, the rest automatically sort themselves into the free spaces */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1),
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2),
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3),
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4)
{
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
overflow: auto;
}

/* biography is hidden... */
.character-profile-biography
{
display: none;
}

/* ...unless its character is selected */
#accordion-select-1:target ~ .character-profile-accordion :nth-child(1) .character-profile-biography,
#accordion-select-2:target ~ .character-profile-accordion :nth-child(2) .character-profile-biography,
#accordion-select-3:target ~ .character-profile-accordion :nth-child(3) .character-profile-biography,
#accordion-select-4:target ~ .character-profile-accordion :nth-child(4) .character-profile-biography
{
display: unset;
}

/* trivial styles */
.character-profile a  {
font-size: 30px;
}
.character-profile {
background-color: magenta;
}
.character-profile-accordion .character-profile:nth-child(2) {
background-color: blue;
}
.character-profile-accordion .character-profile:nth-child(3) {
background-color: yellow;
}
.character-profile-accordion .character-profile:nth-child(4) {
background-color: lime;
}
body {
background-color: #000000;
}
</style>
</section>

The images I used in the demo are 120x120 pixels. when you supply your images, depending on their size,  you may have to adjust the sizes of the css grid.


I have made a similar thing on my website before, using more or less the same techniques

If you have any questions let me know!

attached below is the video demo
v

this was my first thought when seeing ozwomp

allow for inline code so that it doesn't appear to be surrounded by

Code

newline

characters

My stubbornness to use JavaScript had lead me to create https://lophius.xyz/gallery, which uses the css target selector to pick out a single artwork the user wants to look at more closely and uses a similar technique to select from multiple variations of each image which is a pretty niche use case.

physical media can be just as, if not more convenient than streaming if your physical media is high enough capacity, e.g. hard disks. yet this high capacity and the physical connection of harddrives to computers means that you wont touch it as much, losing the novelty you get from external physical media.

To make things worse, DRM ridden files offered by Netflix (they do allow you to download stuff apparently), Steam and Amazon's services has made some people lose sight of harddrives as physical media at all any media i wish to use more than once is written to my disk and drm free

In terms of client side JavaScript, I think HTML and CSS shouldn't have a JS dependency, so that means not using React or something similar for simple things such as a blog or artwork portfolio. The only JS on my site is when JS is the whole point, that is you want to host a program on the web, so maybe you want to port your video game to webgl or in my case I have a painting program made in JS.

and obviously JS shouldn't be used for malware such as spying.

neovim to write it
firefox to view it
git to track, archive and upload it

theres a genus of plant called nymphaea (water lilies) and when programmers cant think of a name for something theyll call it "foobar". i just took the first part and spelt it more consistently with what i already had

most of these are completely innocent and fun but at risk of being being pedantic i think its worth mentioning these are sometimes used as social engineering to get personal information

you can publish the poos i dont mind lol, you have my appooval :omg:k:

how to draw a snowflake:
a snowflake is the slices of a pizza, you see. imagine your square canvas, and now imagine a pizza in the canvas. with your paintbrush, slice the pizza into 8 equal pieces, now you have to be imagining the pizza really well, and notice that the pizza doesnt touch the corners of canvas, so these slice marks are shorter than the horizontal and vertical slices, and there you go, a snowflake! you can then draw random branches forking off of the slice marks and other random decorations


edit: this is probs better explanation

1. canvas
2. pizza in canvas
3. slice the pizza
4. branches (branch vertical and horizontal lines off of the original diagonals, vice versa)
5. random decorations (toppings)
6. eat the pizza

hiiii i have made Snowfall Garden, which is a place where you can paint snowflakes and then generate a css animation that makes them fall from the top of the screen, which you can add to your website for a winter theme. Included is a place to share and discover these creations.
heres the link:
https://snowfallgarden.lophius.xyz

Track your website with git.

Host it on a public repo and then every version of your website is saved and recorded.
If I, or anyone for that matter, wanted to see the first ever version of my site its a simple git clone <repo> and git checkout <commit> away, then just open the html file on a web browser. Furthermore, anyone with your repo can then git pull all future updates. Although the older versions aren't directly live they are still accessible by anyone at any time, which is good enough for me.

Granted, I bestow upon you the confidence, ambition and drive to create more cool places on the internet.

I wish I could bake a potato just by holding it in my hand

okay so moving about the eyes' position is quite simple if you know javascript, but doing that alone breaks the program

ive made it so that you can move the eyes by defining which element you want the eyes to be a child of (thus move to) by specifying the parents id (as a variable in the script) but theres a problem


broken eyes demo on my homepage

you can see how the pupils still move as if they were still in the centre, the script itself uses the centre as a point of reference to base the movement of the pupils, so forcing the eyes in the centre isnt a bad idea, under this circumstance.

fixing this issue was a bit more involved, you basically have to create an offset -based on the eyes' new location- and use it to modify the coordinates that were taken from the cursor's location.


fixed eyes demo on my homepage

ive given the eyes its own id (name of which can be found and changed in the script) so you can mess about with it in css


i havnt tested it much so do post again if you have any issues

Code

<script type="text/javascript">
// <![CDATA[
var width=144; // radius of the eyes in pixels
var colour="#06c"; // colour of the eye - bluey green in this case
var iris="#111"; //  colour of the iris (normally black);
var parentId = "parent" // id of the element you want the eyes to be a child of, must be a valid id otherwise the eyes will not display
var eyesId = "muppetEyes" // id of the eyes (so you can modify it in css)

/***************************\
*  Moving Eyeballs Effect *
*(c)2012-20 mf2fm web-design*
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
\***************************/
var swide=800;
var shigh=600;
var sleft=sdown=0;

var glasses, lefteyeball, righteyeball, lefteye, righteye, glassesCoords;

function addLoadEvent(funky) {
 var oldonload=window.onload;
 if (typeof(oldonload)!='function':wink: window.onload=funky;
 else window.onload=function() {
  if (oldonload) oldonload();
  funky();
 }
}

addLoadEvent(draw_eyes);

function draw_eyes() {
 var i, j, l, r;
 glasses=document.createElement("div":wink:;
 i=glasses.style;
 i.position="absolute";
 /*
 i.top="50%";
 i.left="50%";
 */
 i.width="1px";
 i.height="1px";
 i.overflow="visible";
 i.zIndex="100";
 i.pointerEvents="none";
 glasses.setAttribute("id",eyesId);
 document.getElementById(parentId).appendChild(glasses);
 lefteyeball=document.createElement("div":wink:;
 righteyeball=document.createElement("div":wink:;
 i=lefteyeball.style;
 j=righteyeball.style;
 i.position=j.position="absolute";
 i.width=j.width=(width*2)+"px";
 i.height=j.height=(width*2)+"px";
 i.top=j.top=(-width)+"px";
 i.left=(-2.1*width)+"px";
 j.left=(.1*width)+"px";
 i.borderRadius=j.borderRadius="50%";
 i.backgroundColor=j.backgroundColor=colour;
 i.background=j.background="radial-gradient(circle at "+width+"px "+width+"px, #fff, "+colour+" 75%)";
 i.opacity=j.opacity="0.5";
 i.zIndex=j.zIndex="100";
 glasses.appendChild(lefteyeball);
 glasses.appendChild(righteyeball);
 lefteye=document.createElement("div":wink:;
 righteye=document.createElement("div":wink:;
 i=lefteye.style;
 j=righteye.style;
 i.position=j.position="absolute";
 i.width=j.width=width+"px";
 i.height=j.height=width+"px";
 i.top=j.top=(-width/2)+"px";
 i.left=(-1.6*width)+"px";
 j.left=(.6*width)+"px";
 i.borderRadius=j.borderRadius="50%";
 i.backgroundColor=j.backgroundColor=iris;
 i.opacity=j.opacity="0.8";
 i.zIndex=j.zIndex="101";
 glasses.appendChild(lefteye);
 glasses.appendChild(righteye);
 set_width();
 set_scroll();
}


document.onmousemove=mouse;
function mouse(e) {
 var x, y, xdiff, ydiff, distn;

 glassesCoords = glasses.getBoundingClientRect();
 x=((e)?e.pageX:event.x) + (window.screen.availWidth/2) - glassesCoords.x;
 y=((e)?e.pageY:event.y) + (window.screen.availHeight/2) - glassesCoords.y;
 x-=sleft;
 y-=sdown;

 xdiff=x+(1.1*width)-(swide*0.5);
 ydiff=y-shigh/2;
 distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
 if (distn>width/2.5) {
  xdiff=xdiff*width/distn/2.5;
  ydiff=ydiff*width/distn/2.5;
 }
 lefteye.style.top=(ydiff-width/2)+"px";
 lefteye.style.left=(xdiff-1.6*width)+"px";

 xdiff=x-(1.1*width)-(swide*0.5);
 ydiff=y-shigh/2;
 distn=Math.pow(xdiff*xdiff+ydiff*ydiff,0.5);
 if (distn>width/2.5) {
  xdiff=xdiff*width/distn/2.5;
  ydiff=ydiff*width/distn/2.5;
 }
 righteye.style.top=(ydiff-width/2)+"px";
 righteye.style.left=(xdiff+0.6*width)+"px";
}

document.onscroll=set_scroll;
function set_scroll() {
 if (typeof(self.pageYOffset)=="number":wink: {
  sdown=self.pageYOffset;
  sleft=self.pageXOffset;
 }
 else if (document.body.scrollTop || document.body.scrollLeft) {
  sdown=document.body.scrollTop;
  sleft=document.body.scrollLeft;
 }
 else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  sleft=document.documentElement.scrollLeft;
	sdown=document.documentElement.scrollTop;
 }
 else {
  sdown=0;
  sleft=0;
 }
}

window.onresize=set_width;
function set_width() {
 var sw_min=999999;
 var sh_min=999999;
 if (document.documentElement && document.documentElement.clientWidth) {
  if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
 }
 if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
 }
 if (document.body.clientWidth) {
  if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
 }
 if (sw_min==999999 || sh_min==999999) {
  sw_min=800;
  sh_min=600;
 }
 swide=sw_min;
 shigh=sh_min;
}
// ]]>
</script>

here is the diff output (changes made) incase youre interested

Code

5a6,7
> var parentId = "parent" // id of the element you want the eyes to be a child of, must be a valid id otherwise the eyes will not display
> var eyesId = "muppetEyes" // id of the eyes (so you can modify it in css)
17c19
< var glasses, lefteyeball, righteyeball, lefteye, righteye;
---
> var glasses, lefteyeball, righteyeball, lefteye, righteye, glassesCoords;
34c36,37
<  i.position="fixed";
---
>  i.position="absolute";
>  /*
36a40
>  */
42c46,47
<  document.body.appendChild(glasses);
---
>  glasses.setAttribute("id",eyesId);
>  document.getElementById(parentId).appendChild(glasses);
85,86c90,92
<  y=(e)?e.pageY:event.y;
<  x=(e)?e.pageX:event.x;
---
>  glassesCoords = glasses.getBoundingClientRect();
>  x=((e)?e.pageX:event.x) + (window.screen.availWidth/2) - glassesCoords.x;
>  y=((e)?e.pageY:event.y) + (window.screen.availHeight/2) - glassesCoords.y;

oooh yes i do have some weird cgi's. not that old, although some are old in style.


JackStauber
https://yewtu.be/watch?v=aT7c5J7Utf8
https://yewtu.be/watch?v=FP9y7F_rzzo

bill wurtz
https://yewtu.be/watch?v=zNTaVTMoNTk

Cool 3D World
(very weird)
https://yewtu.be/watch?v=zJGvJtE94tY
https://yewtu.be/watch?v=zw7zrs4xX0g
https://yewtu.be/watch?v=-By9B6rSefk

Chris Jones
another damn face https://yewtu.be/watch?v=ueYtM2KprqY
also https://yewtu.be/watch?v=opsUr3jUpY4

Granted, you can now shapeshift into an elephant riding a unicycle (and nothing else).

I wish I could always tell whether someone was telling the truth or lying.