introduction
a slideshow
use the arrow on the bottom-right to advance
zooming in on this is VERY recommended
hello!
hi, my name is Gergő! you can also call me gray. I'm 17 years old and I use he/him pronouns. I've been coding for about 9 years now, and I am the CTO of NeerY. here are some (significant) coding things I've done:
music
outside of coding, my favourite thing is probably music. i listen to music a lot (at least 30k minutes listened on Spotify every year), and i really like experimental hip-hop, especially JPEGMAFIA. i also used to make mashups and i am currently making some music. here are the music things i've done:
- soundcloud (mashups)
- bandcamp (original music): soon
- collection of obscure JPEGMAFIA tracks/videos (NSFW)
-
last.fm
contact
if you want to contact me, you can do so on my e-mail and twitter. i offer coding help! so if you need help with anything, feel free to shoot me a message somewhere. here are some things i'm knowledgeable at:
- backend: rust, node.js, c#
- frontend: react, svelte
- mobile: react native
- other/WTF: cohost css fuckery, cohost API, js sandbox breaking, gameboy assembly, nintendo + playdate console hacking, nintendo homebrew coding, playdate game coding, spotify internals, no mans sky API
thanks for reading <3
consider following
This is an ingenious little pile of solutions. It's basically a literal stack of cards with some clever holes punched in them to facilitate pagination. I'm going to try to adapt it to break it down visually here.
First up, I've made all the slides' backgrounds slightly transparent, so you can see through them, and see that the structure is in fact a stack; each successive slide goes on top of the last one. In HTML structure, each one actually lives inside the previous, and its visibility is governed by whether the <details> element is open.
this is the first slide,
it lives outside of all the details elements
this outlined section is the details element,
which toggles the first slide
welcome to slide 2!
if you peek at the bottom-right, you may notice the outlined details element is now wider; this is because there's a 2.5 rem-wide div which is toggled along with the slide contents (which are absolute-positioned so they don't affect the size), causing it to expand
the next slide's details element (outlined in green) is placed over the top of the last one's, but without the extra div expanding it; in this way you can click on either, to go forward and back!
it's z-index and clever positioning!
this clever combination of z-index to control layering, absolute positioned slides, and adding content to allow clicking on the previous element enables this whole slide show; here on slide 3 you can see that slide 2's is now wider, and slide 1's is covered entirely.
there's also a "flipped" summary element, to get your browser to render the backwards arrow, but that element plays no actual part in the process
this technique is very cool
shoutouts to @mog for coming up with it
and I hope this breakdown has helped you!
I started digging into this in because I'm thinking about how to use a similar technique, and realised it might be nice to share my understanding of it - I hope this helps you!
