Banned for being a fellow parenthesis hater [Forum ain't big enough for the both of us  ]

Nooooo! Now I have to search for your user name!
Let's see what will come up...

Oh no, ohhh...wait, that's not bad! I guess that's yours?



Interesting!

From Amazon:

"This book contains spiritual thoughts and beliefs along with an outstanding imagination. The poems talk about life as well as humanity. The quotes and wisdom within this book are formed through phrases that open enlightenment to you. Each poem is like a golden light that reveals the hidden truths about oneself. Poetry is a form of therapy, and each poem in this book is like an advice in the form of healing. Heal yourself with this book, and brighten your mood entirely after you reflect from reading each poem of this book."

Huh...

omg yeah that's from my old ACNH island! :D It was called Runestone and had no theme lol. I restarted it recently!

DO NOT IMAGE SEARCH @almostcorporeal 's USERNAME :( There's medical gore everywhere.

But also this:


(by the way, nice Emet-Selch profile picture :3)

wh- i am so sorry i had no idea that would come up ):
thank you!

Apparently there's a pet care company with your username! 

I do want to chime in with /home/user/ that I too also prefer the cobblestone more closely resembling vanilla cobble. I'm okay sticking with Joli if it's what everyone prefers but it has made me re-think some of my building materials and I've ended up just using cobble where I normally would use smooth stone bricks because I like the texture for cobble for bricks better than the smooth stone option.

All the other textures in Joli are super cute too so I'm hesitant to just be switching willy nilly TT_TT

Hopped on around 11pm my time yesterday n had a blast, thanks for setting the server up   

Reading around about a lot of the limitations placed on users by Neocities both in general and behind the supporter account paywall, as well as ofc the concern of if neocities dies all the sites do to some degree, was one of the biggest things that pushed me to look into self-hosting and learning about that early. I do agree that for discoverability, if that's something you desire, I can see the appeal behind something like neocities, but personally I like that neocities gives me a bit of a hand-held idea of how to start using HTML/CSS/JS to set up pages how I like while I spend time looking into self-hosting and figuring out finances/etc on that. I've always been more of a hands on kind of person so having somewhere I can mess around with site building while looking into self-hosting is really nice because I don't feel like I have to put my itch to be creative on hold while I branch out.

As for ichi.city, I use it to host my files for my neocities like mp3s since I can't afford a supporter account. I haven't met anyone so far who has used it for otherwise to my knowledge.

i think ps vita is the most underrated console ever.

i originally wanted to have a ps vita for my birthday, but instead i got a ps4... but hey, you can play ps4 games from ps vita through remote play!

in my opinion, ps vita is a fresh take on psp, and with a nice camera!

I absolutely adored the PS Vita and I still have mine [although it is unfortunately dead forever as my roommate left a full cup of water on our coffee table overnight and one of the cats knocked it over directly onto my Vita, may she rest in peace. I intend to get a new one here soon that matches my pink glitter case better (: ]

Honestly I feel like Sony marketed the Vita completely wrong, gave it next to no real meaningful support, and because of that its game library ended up kinda suffering. Also if you ask Sony now instead of recognizing any of that, they'll just tell you that mobile gaming was too popular [which is why they say they won't ever make another handheld console] ;;

Personally the kinds of games that DID make it onto the Vita are my ideal types of games [stuff like otomes, Persona ports and P4G, Zero Escape, older handheld ports, Freedom Wars, etc] so it's super up my alley. It's really easy for me to hold too which is great because I'm disabled so being able to hold and use my handhelds for a long time is important to me. I even prefer using my Vita to remote play P5R off my roommate's PS4 far more than just sitting in front of the TV and using the PS4 controller, probably because I'm nearsighted and hate wearing glasses so I can physically adjust how far the screen is depending on if I need to read or not much better than just, say, leaning forward in my seat toward my TV. I liked it's additional functionality outside of games too. It has a dedicated browser unlike the Switch, all the social functionality that comes with Playstation consoles like friends, trophies, group voice and text messaging, an app to store and manage all the photos which I like the UI for better than the Switch's, a built in music player, and when it was still an "active" console you could have apps specifically for stuff like Skype, Twitter, Netflix, etc. [Which to my knowledge Switch only has Hulu and YouTube]

Rain! Oh my goodness hi! We follow each other on neocities! Glad to see you around the forums!! 

I'd be super interested in this!! I see it's already set in motion a bit but I just wanted to voice my further support 

hello and welcome! i just finished shadowbringers last night, so i'm delighted by your emet-selch avatar 

Shadowbringers was so so so good!! Truly my fave expac [mostly because I adore emet so very much] I hope you enjoy endwalker! It's also very good. I think it's a good story conclusion.

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

Wow!! Thank you so so much! I really appreciate that! I'll be sure to reach out if things get tricky but from my initial look over I think I got it!!

Nothing is impossible when it comes to computers - the question is how much time will it take

I have to be candid though; to make this as a single page would be a challenging job for me (with quite a lot of knowhow) and I have no idea how Id approach it. I'd probably try to make each character box a large div that could be resized and cropped using overflow: hidden - then use some mix of flex and Javascript to animate it and switch between them.

HOWEVER, based on the fact that your asking, and looking at where your site is right now; I don't think you should take that path! You could fake this and get 90% of the way there if you split it into 2 separate pages.

Page 1: Based on your drawing is a set of profile pictures of the characters and each one is a link to page 2.
Page 2: is your second drawing - the big box is an iframe and the character buttons down the side are links like the ones on Page 1.

Depending on what character you click, it can load that characters bio into the iframe (you can do that easily using my frame script!)

The only tricky bit then is switching the profile pictures on the right of page 2 so they don't show the character your viewing.. that might need some custom JavaScript. However even if it needs custom script it would be MUCH more beginner friendly than trying to do it all as one page and a good was to learn!

I think if you just did a little looping script that hides the one you click and shows all the others - that would be super simple - but worry about that when you get there

If you do it this way; Your first step is try make the 2 pages - get the iframe and bio pages working - get links between them working - then you can come back here if you need help with that final script.

I'm perfectly fine with things taking a bit of time and even a good heaping of elbow grease! :omg:k:
I'm also perfectly happy faking it if I can get something along the same lines as my silly little drawing, so thank you for that!

Looks like I've got a bit of asset creation [profile images and bios n such hehe] and fiddling to do! Thanks so much for the direction, and I'll be sure to come back if I have trouble with the script!!

Hey all! Sorry that this title isn't quite the clearest, I'm not really sure WHAT to call what I want to do on my page [which is why I'm trying to find resources here cuz idk what to pop into my search TT_TT ] so I've drawn it and I can explain how I want it to function to the best of my ability and maybe y'all can point me to how the heck I can get it done!

So I want it to start with a row of 4 100x100 character portraits for instance lined up like so:

[I've added lil faces so you can tell they're different characters (: ]

And then when you click on one of the 100x100 portraits, it expands the box to display a full portrait of the character along with biography, fun facts, any other information you choose, and the other 3 portraits get pushed over to the side of the expanded box like shown here?


[Apologies if these drawings aren't clear, I did them on my phone at 3am haha]

I've tried digging around to figure out how to do this on my own and found a few things like a "flex box accordion style cards" snippet but it expands the information below the initial row of images rather than adjusting the layout like I want it to do.

Is this possible? I should add that I'm on neocities [I understand they don't allow use of anything outside of HTML/CSS/JS?] if that changes anything!
Thank you for reading!

A piece of media that changed me? The only thing that I can actively think of is this niche, 18+ murder visual novel (won't get into that here) but because of that small community I met my best friend of going on 7 years and I can't be happier that I met them.
Another would be the most recent thing: the band Oingo Boingo. I got into the band in like, March-April of last year? And it essentially engulfed my interests for almost a whole year. I can't think of exactly how it changed me, I just know that it did, y'know (besides it being a hyperfixation that turned special interest)? I feel that change at my core but it's explainable.

I think I know which visual novel you're talking about! I adore it so so so much! It inspired me to make my first ever visual novel and properly get into coding!! That's so cool that it helped you meet your best friend 0:

I guess the media that has changed me in the most noticeable way is my favorite book, House of Leaves by Mark Z Danielewski. It really revitalized my love for reading and in a weird way helped me become more comfortable being my naturally weird self!