Its a portfolio/resume in the style of a classic "criminology board" reminiscent of older procedural detective dramas - the kind before computers were widespread, where evidence would be mapped out and charted in person.
The comic genius behind that (which, for anyone who doesn't know is from Always Sunny in Philadelphia) is that Charlie, being illiterate, reads "Pennsylvania" as "Pepe Sylvia".
That was the first time on a website that this behaviour genuinely confused me.
I'd assumed that I'd be able to move around the pinboard by touching and dragging, like a map, and it took a while to click that only scroll-like dragging was getting anything to move at all.
It's not scrolljacking - as I understand the term. It's a very tall body (50,000px) with a sticky full-viewport canvas element which must be animating (mainly Three.js) in line with the the progression of an intersectionObserver attached to the container/body as the user scrolls. This is an example of 'scrollytelling'? A word I learned about a few weeks back and is currently my #1 favourite ugliest neologism in the English language.
It's a clever and intriguing site - which I would expect from someone who works as a graphics editor for the NYT. And yet ... it also disappoints. Disable Javascript and reload the page and nothing happens. Attempt to tab through the site - even to the text and image links - and ... nothing happens. I understand the difficulties around making sites like this (more) accessible but major news outlets like the NYT (and, indeed, the company I work for) should be making much more of an effort on this.
Some of my personal investigations on making canvas things more accessible:
An impressive work of art to capture the attention of an entire network of leads who can afford to pay and certainly have machines strong enough to run this creative advertisement.
I would assume this is product-market fit or at least a good ROI for the work put into this.
This is pretty slick. Although somehow there is no interactivity on Safari/iOS except the pan and zoom?
„Next photo“ for instance in the photo binder doesn’t do anything.
I’m on an iPhone 12 and it doesn’t work well for me. It is slow and unresponsive, most of the screen is hidden (not intentionally I think because the parts that are showing have words cut off and don’t make any sense), etc.
Hard to navigate on Safari/iOS, but love the concept.
Kind of similar to Prezi presentations.
The strings connecting the different concepts make it very intuitive to explore. Reminds me a bit of the old site maps that a lot of sites used to have (although most of them were pretty useless).
I found it easier to navigate on iOS Safari than desktop (swiping down is easier than scrolling for this kind of design, I find), but tapping the portfolio items doesn't work, which is a big issue.
Cool but frustrating when you want to get a different direction than the scroll is leading you.
I wonder if you could re-hijack the scroll and scroll the page to locked-in points so someone can follow different red strings. Might be nauseating though if there is no transition.
Interesting. I browsed the website (as much as I could), then I looked at the comments, and I still cannot honestly figure out (a) why this was posted, (b) why is it suspicious, (c) did the OP think this was cool? (d) did they think it was horrible? (e) what the website is actually about.
It's a quirky twist on a portfolio site, that's it. The implementation is novel and interesting. People liked it, and upvoted it. I think that's all there is to it.
My first thought is that someone had created a HN-specific bot network to upvote it. It was annoying useless site without content and couldn't understand how it got to the first page.
I often open the fridge to find it packed with vegetables, fruits, eggs and other healthy ingredients. I then close the fridge, about 2 minutes later, still empty-handed and still hungry, saying aloud to myself and to whoever will hear…
It’s not actually suspicious or criminal, it’s a portfolio site done in the style of a suspect map in a criminal investigation (or at least, a cinematic portrayal of a crime investigation. The reality is probably more electronic, but that doesn't make for great TV or portfolio sites)
I've done investigations with law enforcement before, and you're right, it is more electronic, but basically it's the same as what you see in the movies just on a screen (so it's searchable). But the software basically has you build clusters of people with evidentiary links.
But it was developed to mimic the old bulletin boards, which looked like what you see in the movies. And also the software is really expensive, so "hobbyist" investigators still do use the bulletin boards and yarn, because the electronic version is too pricy.
Does this software category have a name? Or do you have the names of specific software that is popular, but expensive? I am curious how it looks and works
I'm not sure on the category, maybe law enforcement case management? I can't remember the name of the software I used (it was 20 years ago) but here is an example of one:
A very famous and widespread piece of software for law enforcement cases is called I2 Analyst's Notebook, which lets you create/edit/search/visualize case notebooks [1]. Thomson Reuters has Case Notebook, which is more for lawyers [2].
It's a novel portfolio site in the style of a crime drama bulletin board. The one thing I don't understand after visiting the site is what Eminem has to do with any of it.
Because it's unusable. And it's awesome only because pretty few people hack their own portfolio into an unusable format. If more people did it, even if the format was different for each (which is hard to imagine), the cool factor would be overshadowed by the frustration and impatience these elicit.
Now since very few people do it (or at least it's definitely new for me), it does look cool. But I'm also happy that I didn't have to read through the whole thing and I could stop after a few minutes of scrolling.
* This site shows serious web design chops; this is not something you can easily create on a Friday afternoon by combining standard frameworks and stackoverflow answers.
* This site shows an unusual way to basically show one's resume, a way that definitely stands out for its creativity and amount of work involved.
* This site imitates / parodies the common trope of criminal drama movies, and does so not only in a technically compelling way, but also, to my mind, hilariously.
Thanks! The strange thing for me is that I did not like it at all (navigating it on my phone was quite unintuitive), and so I could not really understand whether it was an ironic post or if people actually liked it. And the comments seemed very cryptic and just made it worse.
The site is completely unusable on my iphone. It’s the equivalent of submitting a leetcode interview question in brainfuck - sure, it’s difficult, but it also shows terrible judgement.
Just barely works on my iPhone 14 pro max in Orion, but it mostly works in Safari
I think it's a cool idea, but the way it works is offensively obnoxious to me as a software engineer. It hijacks the scroll functionality and very choppily pans around in random directions unrelated to what I wanted
That said, I'm not the target audience, haha. I think most people with hiring power would be really impressed with the clever idea and decent execution
Thanks to everyone who clarified it to me; it was not an ironic question, but I still think that the matter is a bit more ambiguous than simply "everyone liked it".
For every web-related HN post there’s always that one person who keeps reminding how it was all better 15 years ago and how you actually dont need any colours on web since they are so irritating.
Tired of hearing this pointless rant every time. Especially since this portfolio is something fresh and not just a cookie cutter WP theme with annoying animations. Web itself can be art or culture or whatever, if it takes 10 seconds to realize how to use it on your phone then big fucking deal. CURL is handy for reading web content I’ve heard, keeps you safe from unpleasant surprises
> For every web-related HN post there’s always that one person who keeps reminding how it was all better 15 years ago and how you actually dont need any colours on web since they are so irritating.
You are a) massively over-interpreting the comment you are replying to, and b) taking it way too personally.
Well that was the gist of the comment, right? You can say it subtly but the point and innuendo remains the same.
I’m not personally offended but admittedly tired of reading this same stuff every week. Maybe I should read less comments, though, as HN is starting to feel like a groundhog week. Luckily not on the same level as Reddit yet.
missed the point. It's the dude's website. Very well done too. Gave me the "conspiracy is afoot" feels. Sometime's you need a distraction from all the sky-falling news or the "we just achieved the impossible but no one can reproduce it" news.
I really like the photos. I'm not into sports at all, but his photos do a really great job of telling the story of a single moment in time. The good composition plus the exact right timing makes for great photos.
It's pretty laggy on Chrome/Windows, but I love this kind of "organic" design. Makes me want to shake off the rust of my little frontend work and build something cool.
"blueshirt is the stomping ground for Jeremy White, who is currently a graphics editor for The New York Times and an adjunct professor at Columbia University. He is a designer, animator, coder, cartographer, photographer and data visualization enthusiast. Here you'll find a few recent examples of his work and some other insanely fun facts about him."
yeah, my cpu usage rose to above 80% without any running any additional code, though I couldn't say if it's a bitcoin miner as I am code-illiterate, for the most part.
yes, I think the cause for the high cpu usage is a large, possibly uncompressed image file that takes a bit of processing to display in the browser, although other methods could be used to limit the processing or make the computation more efficient.
I had the same car model for a couple of years, in red. Mine did have reverse, but the engine used to heat the same as your script and then generated a dense cloud of white smoke.
How do people build things like this? Is there a package that helps at all, or is it really just fighting with CSS for a few months to get it how you want it?
131 comments
[ 4.0 ms ] story [ 172 ms ] threadAll jokes aside, this is very cool.
“Not only do all of these people exist, but they've been asking for their mail on a daily basis. It's all they're talking about up there.”
[0] https://www.awwwards.com/websites/portfolio/
I'd assumed that I'd be able to move around the pinboard by touching and dragging, like a map, and it took a while to click that only scroll-like dragging was getting anything to move at all.
It's a clever and intriguing site - which I would expect from someone who works as a graphics editor for the NYT. And yet ... it also disappoints. Disable Javascript and reload the page and nothing happens. Attempt to tab through the site - even to the text and image links - and ... nothing happens. I understand the difficulties around making sites like this (more) accessible but major news outlets like the NYT (and, indeed, the company I work for) should be making much more of an effort on this.
Some of my personal investigations on making canvas things more accessible:
- Scrollytelling demo (very basic) https://scrawl-v8.rikweb.org.uk/demo/modules-006.html
- Before/after picture slider infographic https://scrawl-v8.rikweb.org.uk/demo/snippets-005.html
I would assume this is product-market fit or at least a good ROI for the work put into this.
Kind of similar to Prezi presentations.
The strings connecting the different concepts make it very intuitive to explore. Reminds me a bit of the old site maps that a lot of sites used to have (although most of them were pretty useless).
I wonder if you could re-hijack the scroll and scroll the page to locked-in points so someone can follow different red strings. Might be nauseating though if there is no transition.
I lol’d
Nailed it.
Huh? Maybe you think it's annoying, but it's nothing but content.
I've done investigations with law enforcement before, and you're right, it is more electronic, but basically it's the same as what you see in the movies just on a screen (so it's searchable). But the software basically has you build clusters of people with evidentiary links.
But it was developed to mimic the old bulletin boards, which looked like what you see in the movies. And also the software is really expensive, so "hobbyist" investigators still do use the bulletin boards and yarn, because the electronic version is too pricy.
https://www.kaseware.com/government/law-enforcement/
[1] https://docs.i2group.com/anb/9.4.1/analysts_notebook_welcome... [2] https://www.thomsonreuters.ca/en/case-notebook.html
Why don't more people 'hack' their own 'news' in such a fashion.
This is great.
Now since very few people do it (or at least it's definitely new for me), it does look cool. But I'm also happy that I didn't have to read through the whole thing and I could stop after a few minutes of scrolling.
1. Everyone else
* This site shows serious web design chops; this is not something you can easily create on a Friday afternoon by combining standard frameworks and stackoverflow answers.
* This site shows an unusual way to basically show one's resume, a way that definitely stands out for its creativity and amount of work involved.
* This site imitates / parodies the common trope of criminal drama movies, and does so not only in a technically compelling way, but also, to my mind, hilariously.
I think it's a cool idea, but the way it works is offensively obnoxious to me as a software engineer. It hijacks the scroll functionality and very choppily pans around in random directions unrelated to what I wanted
That said, I'm not the target audience, haha. I think most people with hiring power would be really impressed with the clever idea and decent execution
That said, I will just leave this here: http://bettermotherfuckingwebsite.com/
What a stupid point. Make your shit less readable because appeal to nature. Even dumber than the usual reason, "I think it looks cool".
Tired of hearing this pointless rant every time. Especially since this portfolio is something fresh and not just a cookie cutter WP theme with annoying animations. Web itself can be art or culture or whatever, if it takes 10 seconds to realize how to use it on your phone then big fucking deal. CURL is handy for reading web content I’ve heard, keeps you safe from unpleasant surprises
You are a) massively over-interpreting the comment you are replying to, and b) taking it way too personally.
I’m not personally offended but admittedly tired of reading this same stuff every week. Maybe I should read less comments, though, as HN is starting to feel like a groundhog week. Luckily not on the same level as Reddit yet.
I wonder what percentage of today's HN readership built a site along these lines using image maps:
https://www.w3schools.com/htmL/html_images_imagemap.asp
If you leave the site open and run the following code snippet, you'll be able to heat your house with your laptop.
This is the coolest thing I've seen this week.