Very impressive, I’ll certainly look into your code to learn how you did the layout.
The only thing that I’ll recommend is that on large screens the space is kind of wasted by having two columns in such a small space, consider that the comfortable line length for an adult is around 75 characters per line…which is understandable if you cannot do it on mobile, but not on a wide screen.
Thank you for your feedback! Fair point about the content width, it does look kind of narrow. I wanted to show multiple columns on big screens because it looks fancier that way, particularly when user sees them change from one to two, but I’ll definitely experiment with giving content more room.
Update: Alright, I made the cards (and whole container) a bit wider so they fit more characters per line. Not quite 75, but more than before. Also added min-width to them so they wrap if container gets too narrow relative to viewport width.
I dig the creative shapes. It is a breath of fresh air compared to the boring rectangles that I use on my websites.
You can make the square images take up 100% width of the columns. I think it may look better?
Thanks! I was trying to evoke associations with Carl Sagan’s ship from his Cosmos series. And yes, perhaps making square image take up both columns would be better. It would become quite huge, but it would have the benefit of getting rid of annoying white space in the introduction block (that block would also be made to take up both columns. Will try it out.
Looks great! Really only one minor criticism, styling wise: your ::selection styling makes selected text very hard to read. Consider also setting the selection’s text color to white or a very light color.