New professional site! (Loom.Cafe)

[Melooon]

I wanted to share my NEW professional site - Loom.Cafe (I really hope I still like that name in 6 months..)

*Disclaimer* While I don't always approve of professional sites being mixed into the web revival (I think it sucks away the fun) I do also recognise that many people including ME need professional sites and Id like to bridge that gap if I can.

First off I was blatantly inspired by cinni.net and was originally planning to do something more like it.. but things didn't go well, and after laying on the floor contemplating the horror of external insecurity of my own talents (as one does when a website is not going well) this idea to do a pure light and dark tunnel came to me.

I wanted it to be modern, but classic, but kinda cool 2000s design company-ish, but also simple and easy to manage. Most of all I wanted it to be honest to myself and to the ideals of the web revival, but also be something that didn't need explaining to a regular person.

Anyway, all things aside Im super pleased with how its turned out  https://loom.cafe

Design Notes:

Essentially its key design feature is that its an iframe floating behind an SVG; there is a little bit of trickery with masking to make the text appear cutout; and its also not PERFECT.. for example you cant set any background other than a solid colour.. but maybe thats something that could be fixed with some sort of flexible svg? Im actually totally new to this whole svg thing!

Once its all setup and you have the fixed iframe and a few common css files to handle styling, its actually super fun to make mini pages like this; it makes my regular site feel like a major effort now! Sort of like an entire website webgarden? The smaller pages are much more forgiving than a full size page.

As for the circle! Ugh I just get sick all all the rectangles on the web sometimes; I know this is secretly still a rectangle, but I would like more orb centric websites! It adds some dead space around the edges, but its worth it.

ANYWAY #2, I hope some of you enjoy it, apologies its not another GifyPet or TextureTown, but sometimes a lil self representation is what the doctor ordered 

[I]

I like what you did with the iframe. Just put a big blank circle and put webpages under it! Very creative melon.

[tarocchilla]

I like it a lot melon!
Manages to look professional without losing soul!;D I like that it has a lot of visual impact, and that i know who's behind it just by looking at it! wether circular or rectangular your websites have a really melon energy, i can see how much of yourself you put in them!

As for the circle! Ugh I just get sick all all the rectangles on the web sometimes; I know this is secretly still a rectangle, but I would like more orb centric websites! It adds some dead space around the edges, but its worth it.

I like the orb idea, i also saw a hexagon centric webpage:



I wish i could experiment with shapes like that more, but it requires quite a bit of technical skills!

[TheFrugalGamer]

This is great! I love the design of course, but I also took the time to look through all the projects you've posted. I really enjoyed your graduate paper 

[BradE]

I like it.  Not only is it well done but it is memorable which is exactly what you want.

[wris]

That’s really cool! You’ve made me want to go play with masking techniques, now. Hmmm!

Also, I know what you mean about mixing professional stuff into web revival, but it also feels like a double edged sword.

“The professional web sucks, none of the websites have any sense of aesthetic style.”
“Okay, can I use this artistic style for my professional site?”
“absolutely not.”

I think the key is always just to do it with sincerity.

[dantescanline]

yooo that transparent masking of the contents beneath is JUICY!! circular websites are definitely the new fad after this drops

[Melooon]

Omgosh! I just noticed its totally broken on chrome and chrome-based browsers! Uggh I wish everyone would just delete chrome so i would not have to figure out how to fix this 

I'll post an update if I do work it out since its an interesting issue. As far as I can see masks.. or text in masks or.. text that folloows paths just does not work in chrome 

EDIT:
OK so, Chrome does not fully support the latest SVG features: in particular it does not support SVG 2.0 that allows you to snap text to a <circle> instead of a dedicated <path> (what Im doing).. So the only fix is to replaced circles with paths.. but thats actually really complicated sooooooo. screw chrome users. you can see my site properly when your crappy browser gets updated (Unless I change my mind..)

EDIT2:
Sigh. I fixed it! And yes it was a ridiculous process! I had to convert the circle to a path using this page. HOWEVER that path was inverted and there no way to un-invert it.. So you have to convert the path to an svg file using this site then import that svg file into Inkscape. Then click the path and do "Menubar/Path/Reverse", then export again as an svg, then open the svg in a text editor and copy the new reversed path coordinates, and paste them into your <path d="XXX"> on the webpage. AND NOW IT WORKS (after you correct the text start position...)

[/home/user/]

Omgosh! I just noticed its totally broken on chrome and chrome-based browsers! Uggh I wish everyone would just delete chrome so i would not have to figure out how to fix this 

I am happy that this implicitly confirms that none of us use a Chrome-based browser because noone mentioned that issue before.

[Melooon]

safari (not sure if it works there).

It was actually totally fine in Safari (I used safari to develop it), people say that Safari and Chrome use the same rendering engine, but I always seem to have TOTALLY different bugs between those two browsers.

But yeah, since it is a PROFESSIONAL site, I kinda needed it to actually work reliably for everyone In general though I don't worry about reliability and it sometimes bites me!

[wris]

people say that Safari and Chrome use the same rendering engine, but I always seem to have TOTALLY different bugs between those two browsers.

This hasn't been true for a while now. Safari uses WebKit, but Chrome forked WebKit and made Blink. Probably why you keep seeing differences.

[/home/user/]

Can confirm that it works well in the text based browser Lynx.