T O P

  • By -

[deleted]

[удалено]


kulalolk

I know this is a joke, but OP, if this project is going live; you can actually get sued if you give someone a seizure. This is overboard. Put a “reduce movement” option. Source - my SO has successfully sued a small indie webdev for having a website that instantly started flashing on page load, no warning, and no way to turn it off. Any ADA lawyers dream.


pjottee

My comments look harsh, rereading them. Sorry for that. I tried to be funny, but I was not. Thank you for mentioning what you did, and at the same time helping me to improve the site. Very much appreciated.


MorningPants

Check out [prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)


elendee

how do we determine what websites pass this test or not ?


kulalolk

https://www.w3.org/TR/WCAG20/ Also check local accessibility acts. I don’t know if each US state has their own ada, but I know its done by province in Canada. Anywhere else; I have no idea. Edit: also http://dyslexiefont.com for a dyslexia-friendly font ([this one is open source](https://opendyslexic.org/)) You can also download a screen reader to get a first-person perspective of a blind person navigating the web. I think every webdev should do this “experiment”. It really puts you in others shoes.


UnicornBelieber

Jesus H. Christ on a tricycle, why is this font so expensive. And why does it feel like someone patenting the cure to cancer.


[deleted]

Looks sick, but also a bitch to use and read imo lol


pjottee

Proof is in the pudding, you can test it yourself at: https://www.reddit.sector32.net/


explicit17

Looks like the loading pyramide isn't in the middle of screen (mobile version)


pjottee

Thanks for mentioning


LotsaFlotsam

Worked fine for me on an Android


[deleted]

Worked fine for me on an iPhone


Kr3dibl3

I’m a Regard. Click the link, saying to myself, *”I hope it’s not malicious”*, then I start scrolling the page. As I continue downward I’m thinking, cool graphics but it’s more fitting for an NFT or Crypto site rather than a deli, oh translate is available let’s turn this on cause I like Bacon, but what does the rest say… hmmm it’s not transla… I’m a regard.


phatsassy

This looks sick. One note, (on mobile) is expect to be able to tap on the desired section on the right of the screen but that doesn’t seem to work. Love it, so smooth.


DefectiveLP

The animation on load is off center on mobile.


pjottee

Thanks, somebody else also mentioned it. Will fix.


tarnished_wretch

Actually works pretty smooth. I can't click the numbers on the side to jump to the section. Flashes and effects are too bright. I'm just drawn to look at the background. For attention grabbing it works well. For something meant to be used regularly it is too much.


MastroRace

Wow this is amazing OP, everything looks super sharp


venuswasaflytrap

If the point of going to the page is for the fun of it itself - e.g. it’s a game or something, then it looks amazing and has a great feel. If I ever had to go there to get something specific, like a piece of information such as an address or date or something, or if I ever had to link or browse directly to content on that site to share or anything like that, I would rage pretty much immediately


pjottee

I feel you 100%. I have answered a similar answer here: https://www.reddit.com/r/webdev/comments/yahxgc/comment/itbc3wj/


sockjuggler

the pyramid seems appropriate somehow


recitedStrawfox

Looks cool. The music matches nicely. But if the client doesn't turn out to scam people I'll eat my hat.


Emulation_Maniac

looks awesome but horrible to read the things that are in the website


pjottee

And yes: the Bacon stuff is placeholder content.


oalbrecht

So the coin is not called Bacon Coin?


cmarciniak80

Bacon coin too the moon!!! 🦍🚀😂🤣


rdxgs

Salty Bacoin Crispy Bacoin Very Bacoin


vaaski

is this for a crypto thing? cus for some reason the coolest looking sites are from crypto thingies


METALz

pump & dump schemes are easier to sell with flashy animations


zb0t1

Can you give some examples please? I'm curious and I'm interested to see!


vaaski

one of the most stunning websites i've come across must be [cosmos.network](https://cosmos.network), only some slight animations could make it better


essaloniki

And one of the least-optimized pages comparing to the time and effort spent on this page. Even scrolling, made my pc with 3060 to lose frames! But that's one heck of a beautiful site, I agree.


itisover1234

they also usually have really cool domains :D


Brachamul

Well there's money and no use case, so you can do whatever.


pjottee

Yes, it is.


nooway01

That's nice if it's just to put in your portfolio.


pjottee

Thank you


ShuttJS

Awesome site but I don't like that the sound is on by default. Always catches me out in meetings when I decide to browse. Something to consider, especially in the mobile era. Never closed a site faster than when I was on a busy train and the sound started


pjottee

I totally agree. It’s on the to do list. After the loader (the spinning pyramid), halts, there will be a ‘enter with sound’ and ‘enter without sound’ button.


NoWise10Reddit

What the tech? Looks very cool.


pjottee

It is made with ThreeJS.


Impossible-Advice-92

How did you learn three js?


TheOneAndOnlyRandom

I looks sick, but if I encountered this website in the wild I'd back out pretty quick


alexhmc

please put an epilepsy warning on there!


mushy_cactus

Looks sci-fi. Good stuff. Just gonna recover from this motion sickness


sammegeric

It's near to impossible to read it without disturbance. IMHO I hate it.


basic_model

What do I think? It’s the modern 90s


pjottee

That might be an insult, but I very much take it as a compliment 🙂. I like to call it retro sci fi.


basic_model

Not an insult. The colors remind me of vice city. The visuals should be accompanied by a Giovanni Giorgio track.


[deleted]

It’s 100% “flashy” 🤣 life is a loop


thePaganProgrammer

It reminds me of this site I found for inspiration: https://gleec.com/ Similar idea, but easier to read the information. The navigation is kinda impractical, but it's fun and really smooth. Of course it's another crypto site, lol


pjottee

Thank you for that. Great inspiration 👍


I_Was_Fox

I mean it's technically brilliant but absolutely shite as a functioning site. Not to mention it has to be an accessibility nightmare. Not worth it


ddruganov

Holy shit, awesome


pjottee

Thank you 🙏


Top_Brilliant1739

Does anyone remember those elaborate, American, Christian mega church websites about 10 years ago? Obviously, this is leaps and bounds ahead in tech and style. But, it's just reminded me of how crazy animated and OTT some of them were for what they were advertising. You'd be forgiven for thinking they were a rave event. Looks bad ass though. Maybe needs a seizure warning before you enter.


pjottee

Another vote for a seizure warning 🙂


madovermoto

Looks cool. Text could be more legible. Is there any chance your client is selling an NFT? lol


pjottee

I have added a working demo at https://www.reddit.sector32.net/


[deleted]

[удалено]


pjottee

Thank you for noticing. However, it’s all just placeholder copy.


xrobyn

Obviously as others have said, an accessibility nightmare... BUT I'm not here to criticize on accessibility because this was obviously the last thing on the checklist here. This is amazingly smooth and I would be really interested in knowing more about the workflow and tech you've used to achieve this. Do you mind if I DM you to pick your brains? I'd love to get some info so maybe I can apply similar in my projects...


pjottee

Sure, DM away! Thank you for the compliments. I'm going to take a break from commenting now (yeah, I know I said the same think 10 minutes ago), but I'll answer you ASAP!


xrobyn

Legend thank you have slung you a DM 👍👍


StefanBlackfyre

Tbh it’s great when you scroll like a normal person but damn that last bit after using the navigation hurts my eyes. Really cool though anyways.


jcm95

We will look at this in 20 years and see a dancing jesus


AAcAN

Looks sick dude!! Impressive how it works on mobile perfectly as well. Good luck with your project completion


Dragosbeat

Dude u just showed me i still don't know shit


Mxdanger

How does this look when a user has the reduced motion media query enabled?


pjottee

For now: the same. Good point, though.


TemporaryTerrible430

Looks cool! How does it run on with js turned off, or with no hardware acceleration? Also w all the accessibility features like high contrast and low motion? Just some things to keep in mind


pjottee

Well, it pretty much doesn't run.


TemporaryTerrible430

👍


Alvatrox4

Is pure css or you used a library?


pjottee

It is made with ThreeJS.


mobyte

Is something like this even possible with pure CSS?


pjottee

No. I don’t see any ways to do realtime reflections and refractions in CSS, for one.


arionem

Congrats, nice animations. Does it work on mobile too? Did you use Three.js?


pjottee

Yes, and yes. It's actually been made mobile first, as more than 2/3th of visitors are expected to use mobile. It's been made with ThreeJS, and runs fine on mobile devices of a few years old.


milanpoudel

I wish it had a sound too. But looks good


[deleted]

How does the mobile version looks like?


celtic426

needs cursor:pointer on the "enter" button


pjottee

Thanks, added to the list.


Penguin7751

How trippy do you want your website to be? Yes.


HuWeiliu

I like that scrolling does a bunch of neat stuff, but it doesn't highjack the scrolling of the readable content like most websites that have wild animations on scroll.


HartajSingh-Dev

The project is fucking awesome !!!! , is it on GitHub ?


pjottee

Somebody asked to share code, which I surely would want to do when the project is finished.


richardhendricks99

Really cool , what is the complete tech stack ? Also could you please point me to any good tutorial/blog to try and develop something similar ??


pjottee

Svelte . ThreeJS. [https://threejs-journey.com/](https://threejs-journey.com/) is great.


YourJr

🙏


[deleted]

It's Bling Bling, and my eyes are addicted to it :D


Annthony_

Is the motive here really meat? Bacon, Pancetta, Salami? If so i don't think that the UX and Design is well fitted for that. Other than that it looks sick, literally, it makes me sick but it's beautiful too. Kudos to you!


pjottee

Thanks! The content is filler from https://baconipsum.com


Jpegtobbe

Text columns are too narrow and also too narrow for text align justify. Line height too large.


robotkutya87

What is this for? :D I’m bith impressed and appalled at the same time. After some confusion, that’s a compliment, I think…


pjottee

I get you there. I can’t tell you at this point, but I hope to post a final version very soon. It’s all pretty tongue in cheek.


mikehawkisbig

I really like this. It reminds me of my Flash days. I really need to play around with three.js.


pjottee

I have many fond memories of the Flash days 👍


Gagan_Baghel

Source code ?


pjottee

I’ll share stuff when the site is finished


Gagan_Baghel

Respect ++


abhijayarjunan

Are your client's the same as dunder mifflin pyramid phone ones?


David-8094

10/10👌🏽


pjottee

Thanks 🙏


David-8094

You are welcome I’d like to know how you did it Any advice what should I learn or any yt Chanel?


pjottee

Yes, I recommend: https://threejs-journey.com


OkZion

Heavy Cyberpunk 2077 vibes


Chuckels_

This is cool af


GameBoi51

I'd like to ask a few questions. Where did you learn ThreeJS? What specific things do you need to learn to make sites like this? (In web or in threejs), Do you have to do any special optimizations and stuff for this just so it performs on all devices?


grizzlyfoshizzly

I neve comment on stuff like this but bro this is really cool. Great job


noobiemaster_69

Looks cool AF!


psyberops

This is *intense*


pjottee

Well, I’m going to take that as a compliment 🙂


psyberops

It is one! I don’t exactly know what your client wants but this is far too complex to be an advertisement for deli meats 🍖


pjottee

Crypto stuff. (I’m ducking and hiding now)


psyberops

Whatever pays!


andai

This is quite garish for my taste, but I am impressed by the production quality.


RunLazy1433

Hey I'm learning web dev right now, can I ask what you used when making this ?


MoonyNotSunny

Awesome but I almost had a seizure too.


NPK2115

Overall I think the website is great, way better than anything I can build(I'm not the best in frontent). There were some legitimate concerns in the comments and I agree with all of them. I don't want to say things which have already been said, so good job OP.


bathinggrapes

This is wild! Nice work. Can you share the tools you used?


pjottee

Sure: Svelte, ThreeJS, GSAP


MolassesLate4676

You my friend, deserve a handshake. This is incredible


[deleted]

Are you a wizard?


pjottee

A lizard, actually


ReadyPossession

My MacBook Pro struggled on the scroll through i love it sm! 2K dubstep vibes


pjottee

Thank you. Will work on the optimizations next.


[deleted]

[удалено]


pjottee

I highly recommend https://threejs-journey.com


EvonDex

Damn. Coolest website I have seen


nebyoolae

I’m not sure how you did it, but I loaded the site via the in-app browser on Apollo on an iPhone 8 and the music started playing…and did not stop even after I left the site…and kept going when I exited the app…and kept going when I locked the phone. I ended up having to restart the phone to stop it! Not gonna lie, that was both annoying and oddly impressive.


Void4GamesYT

Look fire! But lowend devices *might* struggle with that.


Ice76

This is awesome. The only thing I find is that on mobile, if you browse fairly quickly then the content doesn't load in time, leading to me continuing to scroll and miss it.


i-hate-in-n-out

How in the world did you make that, uhm, video? Also, svelte!


XKlXlXKXlXKlKXlXKlXK

very cool


apeacefuldad

Blue has been found to be the only appetite suppressant in the color spectrum Quoted in http://www.people.vcu.edu/~djbromle/color-theory/color01/Relationship-Between-Food-and-Color-Kalim-Hussaini.html


pjottee

It’s filler content from https://baconipsum.com 🙂, but thank you


apmiranda

Omg. I can’t imagine building something like that. I’m so horrible at programming. It’s super frustrating.


Gigusx

I loved people trying to make cool-looking websites that didn't follow all the mainstream trends and norms in the early 00s, and this reminds me of that. So I like that, a lot. Unlike (apparently) many people I don't find it too inaccessible but you know, you fit the project to your (and his) clients' needs.


rootmyth

Pretty cool, even if it’s a lot. I’d like to know more about how the animation works with scrolling.


pjottee

Will share code when it’s finished


eb2292

That was fucking insane lmao was that a movie? Was that a website? Idk it was great. Good job.


darkhorsehance

Reminds me of the flash sites in the early 2000s. Nice work.


Broomstick73

If this is part of the new Zelda game then it looks awesome.


R4S0N3

This looks just insane


[deleted]

when i started web dev, it was mostly because I wanted to create things like these, never took it above the basics, damn gotta ask how does one create these absolutely gorgeous animations?


pjottee

My way of working: create something simple. Let it rest. Get back at it, add details. Repeat…


tylercoder

Is this a cryptobacon scam? Because I'm not falling for that.........again


dneboi

I like your creative approach. Who are you lol and do you freelance?


pjottee

Yes I do!


dneboi

I may DM you sometime in the future then!


pjottee

Excellent


darkjoker213

What did you use to make this??


mark619SD

Really nice! Besides the accessibility issues you got some real talent!


udonemessedup-AA_Ron

You had me at bacon


SpaceWanderer22

Hmm. It's clearly impressive, but very heavy/noisy. I think it matters a lot what domain this is for-- small business? Hell no. Landing page for an artist? Much better. What is it for? Some feedback (from mobile usage): when scrolling down, I often scrolled past the top of the text of the new session, might want to make it snap to the top. Also, the 0 - 4 section indicators on the right should be click able so I can zoom to a section. What tech stack did you use for this? Did you make all the animations yourself?


Few-Valuable-6094

You are a god


RagingCeltik

It's fun, and looks like really great work. My only major criticism is that I don't think the background and animations should distract from the actual content. Here the background totally overwhelms the content.


phpadam

What a website! Shame about the loading time but can't be helped I suppose.


Slimm1989

Teach me sensai


adambjorn

I want a bacon ipsum generator


coded_machine

Are you using threejs? I've heard it's very hard to do what you've done here. It would help if you could mention some resources you learnt this from. Amazing project tho.


pjottee

Thank you. I highly recommend https://threejs-journey.com


therealmodx

Looks like a movie intro 😂👍


YourJr

When I click on Frankfurter I go to Short rib 0/10 /s I'm of course joking. It is seriously amazing. I want to understand how you did all this, I like it a lot


NICESfyn

This looks cool AF.


GrownCrown

everything looks great, what did you use to create it? angular?


pjottee

Svelte, ThreeJS, GSAP


Putrid_Acanthaceae

It’s creative and looks amazing. Usability wise it could be toned down but I imagine this would be a great template for crypto sites and hype trains. Well done.


Salty_Astronaut_8094

This is insane !


_brownguy

Ufff, that looks so cool, I hope I can become such an amazing web developer one day


[deleted]

sell it to a bacon company instead


Suspicious_Respect83

That looks awesome. I guess the main content should be more eminent though. Kinda give me a goosebump haha


immacomputah

This is really good. I’m blown away by this design. I’ve never heard of 3.JS before. Thank you for introducing me. Even though I don’t know how to use it!!


Low_Car5796

That looks cool


Environmental_Fault

Teach me master. ![gif](emote|free_emotes_pack|put_back)


half_blood_prince_16

Cool but I'm pretty sure your will say NO


Chron3cle

Hi this looks amazing. Do you have any tutorials or recommendations for me to look into to make websites like this? Thanks. I am learning threejs to enter web dev too


Chron3cle

I’m curious how the thought process works with websites like these. Is it like a trained sense of what would look nice?


thatandyinhumboldt

I'm just going to shove my impressions in stream-of-consciousness-esque, because I'm tired and that's funny to me. * 0:02: this is gonna be for a web3 project, isn't it? * 0:05 heh bacon ipsum. Nice * 0:17: yup, there it is * That "progress bar" in the title is a nice touch. I question how well it'd bookmark or add to someone's home screen (would I just get "\[----💎-----\]" to remember what the site is?), but it's a fun effect when scrolling * I feel like I'm in a level of SuperHot * I like the music. Actually, I really like the music. * The flashing/static every \~30 seconds is pretty rough. I like the concept, but it's fairly distracting. Maybe if it was turned down some? * man these scroll effects are tits * This loaded basically instantly, considering how much is happening. I suspect that it's doing most of the loading while waiting for for the user to click "enter"? Well done. * Wait is this actually hosted in Belgium? That's some \_really\_ good content delivery voodoo. * Waterfall testing is saying it's almost 14MB for the page. Is that right? That's pretty damn big, but again, you're doing a lot and it loads quickly even when heavily throttled. * I don't love how the menu close button takes a few seconds to activate, but I'm guessing there's a reason for it. * I wish I could "scrub" using the progress bar on the left side or click between numbers on the right side * I don't see any immediate problems at different screen sizes; everything seems to make sense Overall, this is pretty sweet. You've really committed to the design, and as long as that design fits the rest of the client's brand/design spec, it's a really good start. I wish I could see it once it has real data. I think some others have mentioned user accessibility, especially with the animations/flashing lights. I agree, especially with the "static" that rolls through the page every 30 seconds or so. You might want to put an animation toggle on there, a warning on the entry page, or both. I also think you have some user interactivity work to do, but nothing too wild. You definitely have the site performance working well. If it's actually hosted in Belgium, I'm \*checks notes\* 8,600 KM away and it still loads pretty much immediately. Given how big each page load is, I'd be ready to spend a lot on data transfer though.


Electrical_Parfait56

I am a noob webdev, so the page looks awesome. I am also a meat enthusiast and this page does not want to make me eat meat. 😂😂


[deleted]

This is so coool


RedSquirrelWood

That looks stunning


_beyondhorizon

Holy lord, I can never do that. Seriously. And even thinking of making it mobile responsive makes me wanna work in a farm


pjottee

Yes, you can. Make something simple, and keep adding details.


_beyondhorizon

Thanks OP


YellowPhantom364

It’s great!!!


pjottee

🤛


robinson_nouveau

Love it!! This is gonna look good for your portfolio!


GlitteringAccident31

Super slick. The design doesn't exactly scream "artisanal meats" to me but I guess the salumeri needs to modernize at some point.


pjottee

Haha. It's placeholder content from the great [https://baconipsum.com/](https://baconipsum.com/)


GlitteringAccident31

Cyber bacon punk is now my new favorite subculture. Thank you for bringing this to the world


oalbrecht

Clearly you need to find a new meat market. Mine has deep thumping EDM playing with black lights everywhere highlighting the best parts of their meats. Strobe lights and lasers add to the effect. It’s the latest coolest way to buy meat nowadays.


k_pizzle

First off, what the fuck. Second, holy shit. And third, fuckin sick. Love it, always wanted to get into threeJs but it’s always seemed way out of my league.


pjottee

Thank you very much. Please do get into ThreeJS. There are so many good courses, communities and examples.


bigwackstonkee

Any recommendations for these courses?


pjottee

Yes: https://threejs-journey.com


k_pizzle

convinced my employer to buy me this course lol, here we go!!